Блог

Главная - Вопросы по программированию - Кадр анимации запроса вызова каждые пять секунд

Кадр анимации запроса вызова каждые пять секунд

#javascript #requestanimationframe

#javascript #requestanimationframe

Вопрос:

Если мне нужно постоянно получать какие-то новые данные, я знаю, что лучшим решением являются websockets.Таким образом, сервер уведомит клиента о появлении новых данных. Но чтобы избежать этого только для одного сценария, мне нужно будет вызывать некоторый http-запрос каждые пять секунд.

Я использую здесь счетчик только для симуляции вместо вызова какой-либо службы http.

 let counter = 0;
setInterval(() => {
  console.log(counter);
    counter;
},5000)

Я читал, что лучшим решением является requestAnimationFrame вместо setInterval.Он более оптимизирован браузером, а также, когда вкладка не активна, она приостанавливается. Установленный интервал продолжает срабатывать и когда вкладка не активна, что нехорошо.

Как я могу вызывать какую-либо функцию в requestAnimationFrame каждые пять секунд?

Ответ №1:

Чтобы фактически вызывать его только каждые 5 секунд, вам все равно понадобится (как минимум) setTimeout . Но с этим будет работать что-то вроде следующего:

 requestAnimationFrame(function run() {
    console.log('do something w/o initial delay');

    setTimeout(function () {
        console.log('do something w/ initial delay');

        requestAnimationFrame(run);
    }, 5000);
});

Комментарии:

1. Спасибо Йоши за ваш ответ. Я принял ваш ответ, потому что он работает. Является ли это единственным способом восстановления setTimeout?

2. @pece Более или менее. requestAnimationFrame не имеет функции синхронизации, потому что обычно вы хотите вызывать ее как можно чаще, чтобы обеспечить хороший fps (~ 60). Если это не ваша цель, вам нужно обойти это и вызывать его только с интервалами. Обратите внимание, что код работает, но я бы, вероятно, никогда не использовал requestAnimationFrame его таким образом. Я бы придерживался простых setTimeout s. По совпадению, вы могли бы заменить requestAnimationFrame на setTimeout в приведенном выше коде без каких-либо изменений поведения.