Форум

Katy93 · #1 (**permalink**) 24.01.2021, 14:29

Мне нужно чтобы каждую секунду срабатывала функция, только не в setInterval а в requestAnimationFrame. Удалось сделать только секундомер. Можно как-нибудь переделать секундомер, так чтобы функция вызывалась каждую секунду как в setInterval?

Код:

<!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>
    var pointTime = Date.now();
    var seconds = document.querySelector('.seconds');
    
    (function() {
        
       function animate()
        {
          var t = Date.now() - pointTime;
          second = Math.floor(t / 1000) % 60;
          
          seconds.innerHTML = "Секунды: "+second;
          requestAnimationFrame(animate);
        }
        animate();
    })();

    </script>
    
    </body>
</html>

рони · #2 (**permalink**) 24.01.2021, 16:24

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>

Форум

Справочник

Discord чат

Курсы javascript