xinglie.github.io
xinglie.github.io copied to clipboard
requestAnimationFrame
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();
https://issues.chromium.org/issues/41292070
https://github.com/whatwg/html/issues/2569