К слову о Debounce и Throttle

JavaScript
опровергнуть сthrottleЭто функция высокого порядка, обычно используемая в разработке. Она используется для предотвращения частого вызова функций. Другими словами, она используется для контроля того, сколько раз функция выполняется в течение определенного периода времени.

сцены, которые будут использоваться: например, когда привязка реагирует на такие события, как движение мыши, изменение размера окна и прокрутка, частота срабатывания связанной функции будет очень высокой. Если функция обработки немного сложна, она требует больше времени и ресурсов для выполнения операции, и часто возникает задержка, которая может даже привести к зависанию анимации или ощущению заикания. Для оптимизации производительности необходимо использоватьdebounceилиthrottle.

так какdebounceиthrottleОбе функции делают одно и то же, с одним и тем же методом вызова и параметрами, из-за чего легко запутаться. давай поговорим сегодняdebounceиthrottleиспользование и отличия.
Давайте взглянемlodashсередина_.debounce()и_.throttle().
_.debounce(func, [wait=0], [options={}]) 


_.throttle(func, [wait=0], [options={}])

1. debounce
грамматика:
_.debounce(func, [wait=0], [options={}])
Функция debounce обычно называется функцией debounce, которая вызовет метод fn после задержки в миллисекунды ожидания с момента последнего вызова.

Простая реализация
function debounce(fn, wait, options) {   
    wait = wait || 0;   
    var timerId;    


    function debounced() {   
        if (timerId) {   
            clearTimeout(timerId);

            timerId = null;   
        }   
        timerId = setTimeout(function() {   
            fn();     
      }, wait);
   }
    return debounced;
 }
В приведенном выше коде мыdebounceфункция определяетdebounced()Функция определяет внутренний таймер. Всякий раз, когда событие запускается, таймер сбрасывается. То есть, когда событие выполняется, fn не будет выполняться немедленно, а будет выполняться через определенный период времени (ожидание) . . . Если функция не будет выполнена снова после ожидания, будет обработана последняя fn.
Примечание: Даже если до указанного времени остается еще 0,01 секунды, при повторном выполнении функции в это время предыдущий таймер будет отменен, и вам нужно снова дождаться указанного времени.

2. Throttle
грамматика:
_.throttle(func, [wait=0], [options={}])
Функция регулирования, функция, которая выполняет fn не более одного раза в течение секунд ожидания.

иdeboucneразница в том,throttleБудет порог, и когда порог будет достигнут, fn обязательно выполнится.

Простая реализация

function throttle(fn, wait, options) {   
    wait = wait || 0;   
    var timerId, lastTime = 0;    
    
    function throttled() {   
        var currentTime = new Date();   
        if (currentTime >= lastTime + wait) {   
            fn();   
            lastTime = currentTime;   
        } else {   
            if (timerId) {   
                clearTimeout(timerId);   
                timerId = null;   
            }   
            timerId = setTimeout(function() {   
                fn()   
            }, wait);   
       }   
    }    
    return throttled;  
}
В приведенном выше коде мы каждый раз будем записывать время, когда функция действительно вызывается, и если следующий вызов не достигает порога, он будет продолжать ждать, пока не будет достигнут порог, и будет вызвана последняя функция.

полный пример
код спрей.IO/TG код/спрей/…

Суммировать

  • debounce: объединение часто инициируемых событий в одно выполнение.debounceОн подходит для таких событий, как ввод. Когда пользователь вводит, ему необходимо ответить на запрос ajax. Несколько вводов реагируют на метод обратного вызова только один раз.
  • throttle: Установите порог, в пределах порога сработавшие события объединяются в одно выполнение, а при достижении порога должно выполняться одно событие.throttleОн подходит для событий изменения размера или движения мыши, не позволяя браузеру часто реагировать на события и серьезно снижая производительность.


Справочная статья
Если у вас есть какие-либо ошибки или вопросы, пожалуйста, оставьте сообщение в области комментариев ниже!
Категории