I have a requirement to change the browser’s mouse cursor style dynamically to achieve a mouse animation effect. To simplify the content for discussion, it can be represented by the following code:
const cursorTypes = ["default", "pointer", "text", "move", "help", "progress", "crosshair", "not-allowed", "zoom-in", "zoom-out", "grab", "grabbing"];
let cIndex = 0;
setInterval(() => {
console.log(cIndex);
document.body.style.cursor = cursorTypes[cIndex];
cIndex++;
if (cIndex >= cursorTypes.length) {
cIndex = 0;
}
}, 500);
The problem is that when the browser loses focus, although the setInterval function continues to run normally, the mouse cursor style does not change. However, when the mouse is continuously moved within the browser viewport, the styles that are not rendered will be applied sequentially at the set interval. Once the mouse stops moving, the rendering stops immediately until the browser regains focus. Why is this happening? I suspect this might be related to the browser’s rendering buffer.
I have tried using requestAnimationFrame function for animation updates:
let frameIndex = 0;
let step = (timestamp, elapsed) => {
if (elapsed > 1000 / frameRate) {
document.body.style.cursor = cursorTypes[cIndex];
frameIndex++;
if (frameIndex >= frameURLs.length) {
frameIndex = 0;
}
elapsed = 0;
}
console.log(frameIndex);
window.requestAnimationFrame((_timestamp) =>
step(_timestamp, elapsed + _timestamp - timestamp)
);
};
window.requestAnimationFrame((timestamp) => step(timestamp, 0));
Or using the CSS animation property:
@keyframes cursor-animation-keyframes{
0% { cursor: default; }
6% { cursor: pointer; }
...
}
.cursor-animation {
animation: cursor-animation-keyframes 1866ms step-end infinite;
}
But the results are the same with no difference.
What should I do to ensure that the mouse cursor style modification still works after the browser loses focus?