Untitled

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>wait test</title>
<script>
    let base = 0;
    let count = 0;
    let hwm = now();

    function visible_change()
    {
        ++count;
        el = document.getElementById('count');
        el.innerText = 'count: ' + count;
    }

    function slow_task(n)
    {
        log('start slow task...');
        note('start slow task...');
        goal = now() + n;
        while (now() < goal) ;
        log('finish slow task');
        note('finish slow task');
        hwm = now();
        enable_start();
    }

    function call_after_RAF(fn)
    {
        note('using single requestAnimationFrame');
        window.requestAnimationFrame(fn)
    }

    function call_after_RAFRAF(fn)
    {
        note('using double requestAnimationFrame');
        intermediate = function () { note('intermediate'); window.requestAnimationFrame(fn); }
        window.requestAnimationFrame(intermediate);
    }

    function call_after_RIC(fn)
    {
        note('using single requestIdleCallback');
        window.requestIdleCallback(fn)
    }

    function call_after_RICRIC(fn)
    {
        note('using double requestIdleCallback');
        intermediate = function () { note('intermediate'); window.requestIdleCallback(fn); }
        window.requestIdleCallback(intermediate);
    }

    function call_after_STO(fn)
    {
        let to = get_number('timeout');
        note('using setTimeout of ' + to);
        setTimeout(fn, to);
    }

    function call_after_STOSTO(fn)
    {
        let to = get_number('timeout');
        note('using double setTimeout of ' + to);
        intermediate = function () { note('intermediate'); setTimeout(fn, to); }
        setTimeout(intermediate, to);
    }

    function call_direct(fn)
    {
        note('using direct call');
        fn();
    }

    function call_slow_task(how)
    {
        delay = get_number('delay');
        s = function () {slow_task(delay);};
        visible_change();
        disable_start();
        if (how == 'STO')
            call_after_STO(s);
        else if (how == 'STOSTO')
            call_after_STOSTO(s);
        else if (how == 'RAFRAF')
            call_after_RAFRAF(s);
        else if (how == 'RAF')
            call_after_RAF(s);
        else if (how == 'RICRIC')
            call_after_RICRIC(s);
        else if (how == 'RIC')
            call_after_RIC(s);
        else if (how == 'direct')
            call_direct(s);
    }

    function clicked(evt, how)
    {
        if (base == 0)
            set_base(evt);
        if (evt.timeStamp + base < hwm)
        {
            log('old click @ ' + evt.timeStamp + ' ignored');
            return false;
        }
        reset_notes();
        log('click ' + how + ' timestamp:' + evt.timeStamp);
        call_slow_task(how);
        return true;
    }

    function now() { return (new Date).getTime(); }

    function get_number(id)
    {
        let el = document.getElementById(id);
        return +el.value;
    }

    function log(txt)
    {
        let el = document.getElementById('log');
        let ts = now() - base;
        el.innerText = el.innerText + "\n" + ts + ': ' + txt;
    }

    function clear_log()
    {
        let el = document.getElementById('log');
        el.innerText = '';
    }

    function note(txt)
    {
        let el = document.getElementById('notes');
        let ts = now() - base;
        el.innerText = el.innerText + "\n" + ts + ': ' + txt;
    }

    function reset_notes()
    {
        let el = document.getElementById('notes');
        el.innerText = '';
    }

    function disable_start()
    {
        let els = document.getElementsByClassName('start');
        for (let i = 0; i < els.length; ++i)
            els[i].disabled = true;
    }

    function enable_start()
    {
        let els = document.getElementsByClassName('start');
        for (let i = 0; i < els.length; ++i)
            els[i].disabled = false;
    }

    function set_base(evt)
    {
        base = now() - evt.timeStamp;
        log('base set to ' + base + ' from event timeStamp ' + evt.timeStamp);
    }
</script>
</head><body>
<div id='count'>count: 0</div>
<div>timeout (ms): <input id='timeout' type='text' value='0'></div>
<div>slow task delay (ms): <input id='delay' type='text' value='1000'></div>
<div>
    <input type='button' value='set base' onclick='set_base(event)'>
    <input type='button' value='clear log' onclick='clear_log(event)'>
</div>
<hr/>
</tr>
<table>
<tr>
    <td><input id='direct' type='button' class='start' value='direct' onclick='return clicked(event, "direct")'></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td><input id='STO' type='button' class='start' value='setTimeout' onclick='return clicked(event, "STO")'></td>
    <td><input id='RAF' type='button' class='start' value='requestAnimationFrame' onclick='return clicked(event, "RAF")'></td>
    <td><input id='RIC' type='button' class='start' value='requestIdleCallback' onclick='return clicked(event, "RIC")'></td>
</tr>
<tr>
    <td><input id='STOSTO' type='button' class='start' value='double setTimeout' onclick='return clicked(event, "STOSTO")'></td>
    <td><input id='RAF' type='button' class='start' value='double requestAnimationFrame' onclick='return clicked(event, "RAFRAF")'></td>
    <td><input id='RICRIC' type='button' class='start' value='double requestIdleCallback' onclick='return clicked(event, "RICRIC")'></td>
</tr>
</table>
<div id='notes'></div>
<hr/>
<div id='log'></div>
</body>
</html>