Long polling with Api

long-polling-with-api.html

<div >
    time: <span id="time"></span> ms, counter: <span id="counter"></span>
</div>
<h4>วันหยุด mahidol</h4>
<ul id="todo-list" style="list-style-type: decimal;">
</ul>

<script>
    var elem = {
        list : document.getElementById("todo-list"),
        counter : document.getElementById("counter"),
        time : document.getElementById("time")
    }

    var state = {
        counter : 0,
        time: 0
    }
    
    const poll = () => {
        fetch("/api")
            .then(async (res) => {
                var todo = await res.json();
                elem.list.textContent = null
                todo.map((td) => {
                    var li = document.createElement("li");
                    li.textContent = td.event_name
                    elem.list.appendChild(li)
                })
            })
    }

    // main
    (()=>{
        poll()

        elem.counter.textContent = state.counter
        elem.time.textContent = state.time

        setInterval(() => {
            state.counter += 1;
            state.time = -1;
            elem.counter.textContent = state.counter
            poll()
        }, 5000)

        setInterval(() => {
            state.time += 1;
            elem.time.textContent = state.time
        }, 1000)
    })();
</script>