Как сделать так, чтобы setInterval работал корректно на мобильных устройствах
Во время тестирования своего сайта на телефоне, я увидел, что таймер замедляется примерно в 2 раза. На сайте есть раздел с CPS тестом (click per second), время обновления таймера, а соответственно и поля с показателем CPS - 10 миллисекунд. На ПК все работает как надо. На сколько я понял проблема состоит в том, что действия которые должны выполняться раз в 10 миллисекунд на более слабых устройствах выполняются дольше => таймер замедляется.
Какие действия мне стоит предпринять и в чем я ошибся?
P.S. На JSе пишу первый раз, так то не бейте. Весь проект есть на GitHub'e: https://github.com/S1riyS/CLICKSPEED
import { parseURLParams } from './modules/url_parser.js';
let isTestStarted = false,
clicks = 0, // clicks
cps = 0, // clicks per second
countdownValue = parseURLParams(window.location.href)['test_time'][0], // seconds
time = 0, // current time in timer
timer;
const counter = document.getElementById('counter'),
timerElement = document.getElementById('timer'),
cpsCounter = document.getElementById('cps'),
clickButton = document.getElementById('start-btn'),
clickArea = document.getElementById('click-area');
// Функция, которая отрабатывает при нажатии на "кнопку"
function startGame() {
clicks++;
counter.innerHTML = clicks;
if (isTestStarted == false) {
time = 0;
isTestStarted = true;
startTestLoop();
clickButton.innerHTML = '';
}
}
// Привязка функции к кнопке начала и игровому полю
clickButton.onclick = startGame;
clickArea.onclick = startGame;
// Обновления содержимого HTML элементов
function updateHTML(time) {
let dateTimer = new Date(time);
let currentTime =
dateTimer.getUTCSeconds() + '.' +
('0' + dateTimer.getUTCMilliseconds()).slice(-3, -1);
timerElement.innerHTML = currentTime
cpsCounter.innerHTML = (clicks / (time / 1000)).toFixed(2);
}
// Главная функция
function startTestLoop() {
clearInterval(timer);
timer = setInterval(() => {
time += 10;
updateHTML(time);
if (time >= countdownValue * 1000) {
timerElement.innerHTML = countdownValue + ".00"
clicks = 0;
cps = 0;
clickButton.innerHTML = 'Click here to start playing';
clearInterval(timer);
isTestStarted = false;
}
}, 10)
}