Изменение стиля курсора мыши браузера становится недействительным после того, как браузер теряет фокус.Javascript

Форум по Javascript
Ответить
Anonymous
 Изменение стиля курсора мыши браузера становится недействительным после того, как браузер теряет фокус.

Сообщение Anonymous »

Мне нужно динамически изменить стиль курсора мыши в браузере, чтобы добиться эффекта анимации мыши. Чтобы упростить контент для обсуждения, его можно представить следующим кодом:

Код: Выделить всё

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);

Проблема в том, что когда браузер теряет фокус, хотя функция setInterval продолжает работать нормально, стиль курсора мыши не меняется. Однако при постоянном перемещении мыши в области просмотра браузера неотрисованные стили будут применяться последовательно с заданным интервалом. Как только мышь перестает двигаться, рендеринг немедленно прекращается, пока браузер не восстановит фокус. Почему это происходит? Я подозреваю, что это может быть связано с буфером рендеринга браузера.
Я пробовал использовать функцию requestAnimationFrame для обновления анимации:

Код: Выделить всё

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));
Или используя свойство анимации CSS:

Код: Выделить всё

@keyframes cursor-animation-keyframes{
0% { cursor: default; }
6% { cursor: pointer; }
...
}

.cursor-animation {
animation: cursor-animation-keyframes 1866ms step-end infinite;
}
Но результаты те же, без каких-либо различий.
Что мне следует сделать, чтобы модификация стиля курсора мыши по-прежнему работала после того, как браузер теряет фокус?

Подробнее здесь: https://stackoverflow.com/questions/793 ... fter-the-b
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»