Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.01.2021, 14:29
Аспирант
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 69

Как сделать из requestAnimationFrame setInterval?
Мне нужно чтобы каждую секунду срабатывала функция, только не в 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,912

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать сделать смену картинки по щелчку мыши? PavelGR Javascript под браузер 0 09.08.2020 10:28
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 20:32
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20
Как сделать постоянную проверку на javascript alb Общие вопросы Javascript 18 09.01.2010 14:05