Производительность - window.onscroll vs setInterval

Question

Что было бы лучшим решением по производительности - выполнение функции каждые 100 мс через setInterval или выполнение функции при прокрутке страницы? Я только что проверил, и один свиток может вызвать выполнение функции более 50 раз. Установка setInterval на 100 мсек приведет к тому, что функция будет выполняться только 10 раз в секунду, но в нижней части функция будет выполняться, даже если страница не прокручивается.

Функция довольно прост (checkes window.pageYOffset и изменяет стиль, если это более 100)

Answer 1

Это звучит как работа для debounce функции. Такая скорость метода ограничивает вызов функции.

Вы упомяните о единственном прокрутке, ударяющем ваш обратный вызов более 50 раз. Используя debounce, обратный вызов не будет вызываться до тех пор, пока функция debounce НЕ будет вызываться в течение определенного времени. (В приведенном ниже примере 300мс)

var scrollHandler = debounce(function() { 
    // your window.pageYOffset logic 
}, 300); 

window.addEventListener('scroll', scrollHandler); 

Гораздо более полное объяснение и пример debounce функцию можно найти по адресу:

https://davidwalsh.name/javascript-debounce-function

или

Can someone explain the "debounce" function in Javascript

Используя такое подход сделает более оптимизированное количество вызовов и только тогда, когда страница будет взаимодействовать d (звучит так, как это происходит при прокрутке страницы).