Как запустить событие, только если определенное время истекло после остановки прокрутки

Question

Я хочу запустить обработчик событий после и только если прокрутка была остановлена ​​для конкретное время (скажем, 0,2 сек).

У меня есть несколько стилей позиционирования CSS, связанных с боковым меню вне холста (в мобильной версии), которому постоянно и автоматически присваивается новое значение, соответствующее прокрутке, каждый раз при прокрутке пользователя.

Я хочу запустить этот обработчик событий (присвоения нового значения), только если прошло 0,2 с после того, как пользователь запускает и останавливает прокрутку.
Если я связываю это событие с событием прокрутки, то не будет ждать, пока условие проверит, истекло ли 0,2 с. он просто продолжит запускать обработчик событий, пока пользователь выполняет прокрутку.

Так, как я могу сделать это?

Answer 1

вы можете использовать это:

// Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

    // Clear our timeout throughout the scroll
    window.clearTimeout( isScrolling );

    // Set a timeout to run after scrolling ends
    isScrolling = setTimeout(function() {

        // Run the callback
        console.log( 'Scrolling has stopped.' );

    }, 200); // 200 for 0.2s 

}, false);