requestAnimationFrame

[xinglie]

let testSync = () => {
    let last;
    let raf = time => {
        if (last) {
            console.log(time - last);
        }
        last = time;
        requestAnimationFrame(raf);
    };
    requestAnimationFrame(raf);
}

testSync();



let testAsync = () => {
    let last;
    let raf = async time => {
        if (last) {
            let diff = time - last;
            if (diff <= 5) {
                console.log('diff', diff);
            }
        }
        last = time;
        await Promise.resolve();
        requestAnimationFrame(raf);
    };
    requestAnimationFrame(raf);
};

testAsync();

let testAsync2 = async () => {
    let last;
    let raf = time => {
        if (last) {
            console.log(time - last);
        }
        last = time;
    };
    requestAnimationFrame(raf);
    await Promise.resolve();
    requestAnimationFrame(raf);
};

testAsync2();

let testSync3 = () => {
    let {
        port1, port2
    } = new MessageChannel();
    let exec;
    port1.onmessage = () => {
        exec?.();
    };
    let last;
    let raf = time => {
        if (last) {
            console.log(time - last);
        }
        last = time;
        exec = () => {
            requestAnimationFrame(raf);
        };
        port2.postMessage(null);
    };
    requestAnimationFrame(raf);
}

testSync3();

[xinglie]

https://issues.chromium.org/issues/41292070

[xinglie]

whatwg/html#2569