<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser-polyfill.js"></script>
<script type="text/babel">
function* director() {
yield "3";
yield "2";
yield "1";
yield "Action";
}
var action = director();
console.log(action.next().value);
console.log(action.next().value);
console.log(action.next().value);
console.log(action.next().value);
console.log(action.next().value);
function* eachItem(arr) {
for (var i = 0; i < arr.length; i++) {
yield arr[i];
}
}
var letters = eachItem(["a", "b", "c", "d", "e", "f", "g"]);
var abcs = setInterval(function () {
var letter = letters.next();
if (letter.done) {
clearInterval(abcs);
console.log("Now I know my ABC's");
} else {
console.log(letter.value);
}
},
500);
</script>
<title>Generators</title>
</head>
<body>
</body>
</html>

Output