«Это третий день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г."
я писал ранее«Научитесь использовать requestAnimationFrame для реализации обратного отсчета за три минуты»В статье объясняется, как использоватьrequestAnimationFrameОбратный отсчет был реализован, и многие мелкие партнеры хвалили его, и время точное.
Однако в процессе калибровки времени, чтобы быстро догнать отстающее время, время прыгало слишком быстро, что делало опыт не очень хорошим, и я чувствовал, что время было неточным, поэтому я оптимизировал версию. исходя из этого.
Для того, чтобы добиться супер точной версии! Супер гладко! Превосходное представление! Испытайте отличный обратный отсчет
Старая версия кода реализации функции,демо кликабельно
const totalDuration = 10 * 1000;
let requestRef = null;
let startTime;
let prevEndTime;
let prevTime;
let currentCount = totalDuration;
let endTime;
let timeDifferance = 0; // 每1s倒计时偏差值，单位ms
let interval = 1000;
let nextTime = interval;
setInterval(() => {
let n = 0;
while (n++ < 1000000000);
}, 0);
const animate = (timestamp) => {
if (prevTime !== undefined) {
const deltaTime = timestamp - prevTime;
if (deltaTime >= nextTime) {
prevTime = timestamp;
prevEndTime = endTime;
endTime = new Date().getTime();
currentCount = currentCount - 1000;
console.log("currentCount: ", currentCount / 1000);
timeDifferance = endTime - startTime - (totalDuration - currentCount);
console.log(timeDifferance);
nextTime = interval - timeDifferance;
// 慢太多了，就立刻执行下一个循环
if (nextTime < 0) {
nextTime = 0;
}
console.log(`执行下一次渲染的时间是：${nextTime}ms`);
if (currentCount <= 0) {
currentCount = 0;
cancelAnimationFrame(requestRef);
console.log(`累计偏差值： ${endTime - startTime - totalDuration}ms`);
return;
}
}
} else {
startTime = new Date().getTime();
prevTime = timestamp;
endTime = new Date().getTime();
}
requestRef = requestAnimationFrame(animate);
};
requestRef = requestAnimationFrame(animate);
Тогда есть небольшая проблема с этим кодом
// 慢太多了，就立刻执行下一个循环
if (nextTime < 0) {
nextTime = 0;
}
Проблема в том, что если поток заблокирован и обратный отсчет серьезно отстает, предположим3s, я установил здесь следующий цикл0s, то теперь отсчитывает текущий15s, вы увидите быстрый обратный отсчет до12s, одноклассник по продукту сказал как ты ускорил обратный отсчет?
Этот обратный отсчет ускоряется, как конец моей карьеры ускоряет обратный отсчет, я дрожал, и я быстро починил его.
На самом деле это очень просто, то есть поставить это близкое значение0Вы можете установить количество раз, близких к каждому циклу, тогда фактически невозможно увидеть, что каждый раз происходит небольшое ускорение/замедление.Здесь количество раз для каждого цикла равно1s, то мы можем изменить приведенный выше код, чтобы оптимизировать взаимодействие с пользователем, замедлив операции, описанные в предыдущем описании наверстывания.
например, догнать раньше2sсуществует3s～4sЕсли Nei сразу догоняет, то флуктуация очевидна, но если2sсекунды позади, ложись до следующего обратного отсчета1min, каждый раз о погоне30ms, это невидимо
// 慢到一定临界点，比正常循环的时间数稍微慢点，再执行下一个循环
if (nextTime < 900) {
nextTime = 900;
}
Здесь я настроен догонять каждую секунду, когда слишком сильно отстаю100ms, если позади2s,20sПосле этого я могу наверстать упущенное и вернуться, и нет явных колебаний, и время выверено точно, что было высоко оценено одноклассниками!
Хотя модификация небольшая, она также получается после многократного размышления ~ Если требования ко времени относительно строгие, а диапазон времени обратного отсчета относительно мал, слишком поздно расширять разрыв на такой большой период времени, рекомендуется пусть учащиеся бэкэнда регулярно отправляют последний обратный отсчет на бэкэнд используется для проверки точности времени, что надежно.
Эпилог
Вышеизложенный мой опыт использования requestAnimationFrame для многократной реализации функции обратного отсчета. Я надеюсь, что это может быть полезно для всех. Если вы можете получить небольшой лайк в качестве поощрения, я буду очень благодарен! !
Рекомендуем еще статьи:
«Супер подробно! Отслеживайте пять фоновых ситуаций апплета WeChat»