Показать сообщение отдельно
  #2 (permalink)  
Старый 24.01.2021, 16:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

animate requestAnimationFrame
Katy93,
<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Секундомер</title>
</head>
    <body>
     <div class="seconds">Секунды: 0</div>
    <script>
const oneSecond = f => {
    let cycle = {};
    let start = performance.now();
    f();
    let animate = now => {
        let progress = now - start;
        if (progress > 1000) {
            start += 1000;
            f();
        };
        cycle.timer = requestAnimationFrame(animate);
     }
    cycle.timer = requestAnimationFrame(animate);
    return cycle;
};
let seconds = document.querySelector('.seconds');
let second = 0;
let f = _ => seconds.innerHTML = `Секунды: ${second++}`;

let removeAnimate = oneSecond(f);
//тест остановки через 10 секунд
window.setTimeout(_ => cancelAnimationFrame(removeAnimate.timer), 10050);

    </script>

    </body>
</html>
Ответить с цитированием