JSFiddle - React, Tailwind, and code Playground

by Sandeep Agrawal

HTML

<pre id="output"></pre>

JavaScript

function * generator() {
    console.log('First execution.');
    yield 'Yield First execution, saved the state and exit';
    console.log('Second execution will be on next() call.');  
    let passedArgument = yield 'Yield second execution, saved the state and exit';
    yield passedArgument;
}

const generatorObj = generator();

// After below execution, generator will yield value, return below object and pause execution.
// {value: 'Yield First execution, saved the state and exit', done: false}
setTimeout(() => document.getElementById('output').innerHTML += "\n" + JSON.stringify(generatorObj.next()), 1000);

// After below execution, generator will yield value, return below object and pause execution.
// {value: 'Yield First execution, saved the state and exit', done: false} 
setTimeout(() => document.getElementById('output').innerHTML += "\n" + JSON.stringify(generatorObj.next()), 3000);

// After below execution, generator will yield value, return below object and pause execution.
// {value: "This is the passed value", done: false}
setTimeout(() => document.getElementById('output').innerHTML += "\n" + JSON.stringify(generatorObj.next('This is the passed value')), 5000);

// After below execution, generator will yield value, return below object and close execution.
// {value: undefined, done: true}
setTimeout(() => document.getElementById('output').innerHTML += "\n" + JSON.stringify(generatorObj.next()), 7000);