<!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