The interface of requestAnimationFrame is difficult and rigid to use.
to-raf is a throttling adapter to requestAnimationFrame. If a number of exepressions of toRaf(f) are executed in an interval of a frame, requestAnimationFrame throttles them using the last one. If no expression in an interval of a frame is executed, it does nothing.
getToRAF creates one animation closure.
If you want two independent animations, create two.
import getToRAF from 'to-raf';
const toRAF = getToRAF();
const toRAFa = getToRAF();toRAF(otherFunctionForEachTime); // `otherFunctionForEachTime` does not need to be a single ref.import getToRAF from 'to-raf';
// ...
const toRAF = getToRAF();
export default function MouseCage() {
// ...
const handleMouseMove = e => {
toRAF(() => setX(e.clientX))
};
return (
<div onMouseMove={handleMouseMove}>MouseCage {x}</div>
);
}This code shows how it works.
let x = 0;
const createNewFunctionEachTime = () => timestamp => console.log(x++, timestamp);
const id = setInterval(() => {
toRAF(createNewFunctionEachTime()); // function could be mutable :) wow
}, 1); // it prints 0 ~ 61 for 1 sec on my machine
setTimeout(() => {
clearTimeout(id);
}, 1000);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent