generator-examples/nonblocking-counter/index.html at gh-pages · rauschma/generator-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nonblocking counter</title>

    <!-- Load Babel scripts -->
    <script src="node_modules/babel/browser-polyfill.js"></script>
    <script src="node_modules/babel/browser.js"></script>
</head>
<body>
    <h1>Nonblocking counter</h1>

    Counter: <span id="counter"></span>
    <p>
    GitHub project: <a href="https://github.com/rauschma/generator-examples">generator-examples</a>

    <script type="text/babel">
        function* countUp(start = 0) {
            while (true) {
                start++;
                yield* displayCounter(start);
            }
        }
        function* displayCounter(counter) {
            const counterSpan = document.querySelector('#counter');
            counterSpan.textContent = String(counter);
            yield; // pause
        }
        function run(generatorObject) {
            if (!generatorObject.next().done) {
                // Add a new task to the event queue
                setTimeout(function () {
                    run(generatorObject);
                }, 1000);
            }
        }
        run(countUp());
    </script>
</body>
</html>