Тротлинг в js

Давайте создадим простую функцию тротлинга и разберем как мы можем ее вызывать.

const throttle = (func, timeout) => {
    let isTimeout = false;

    return function () {
        if (isTimeout) {
            return;
        }

        isTimeout = true;

        setTimeout(function () {
            isTimeout = false;
            return func();
        }, timeout);
    }
}

1 способ вызова

Функция-обработчик скролла создается вызовом throttle и возвращается из нее. т.е. сама функция throttle вызывается 1 раз.

document.addEventListener('scroll', throttle(function(){
    console.log(1);
}, 1000));

2 способ вызова

Мы заранее создаем затротленную функцию throttledFunction . а потом ее будем вызывать каждый раз при скролле.

const throttledFunction = throttle(function () {
    console.log(1);
}, 1000);
document.addEventListener('scroll', (e) => {
    throttledFunction();
});

Более полная функция тротлинга

С принудительным остановкой setTitmeout.

function throttle(func, timeout) {
    let isTimer = false;

    return function() {
        if (isTimer) {
            return;
        }
        const timer = setTimeout(() => {
            func();
            isTimer = false;
            clearTimeout(timer);

        }, timeout);
        isTimer = true;
    }
}