Не совсем понятно для чего параметр в window.debounce — functionToDebounce и что вообще значит window.debounce?

Question

[olya_097]

'use strict';

(function () {
  var DEBOUNCE_INTERVAL = 500;

  var lastTimeout;
  window.debounce = function (functionToDebounce) {
    if (lastTimeout) {
      window.clearTimeout(lastTimeout);
    }
    lastTimeout = window.setTimeout(functionToDebounce, DEBOUNCE_INTERVAL);
  };
})();

Answer 1

[Stalker_RED]

В браузерах нет встроенного debounce
В этом примере создается функция debounce, и ссылка на нее записывается в window.debounce

Что такое вообще этот debounce можно почитать здесь (а заодно и про throttle)

Comments

[olya_097]

а параметр functionToDebounce? его же нигде нет

[Василий Варюхин]

olya_097, Это функция которую вы туда передадите, т.е. которую нужно debounce'ить.

window.debounce(doShit);

doShit == functionToDebounce

[olya_097]

Василий Варюхин, так в коде ее нет

[olya_097]

Василий Варюхин, так я правильно я поняла
код не полный?

[olya_097]

Василий Варюхин, и как понять условие if (lastTimeout)? ведь в lastTimeout ничего нету по сути
только написано var lastTimeout;

[Сергей delphinpro]

olya_097,

window.debounce = function (functionToDebounce) {
    ...
    lastTimeout = window.setTimeout(functionToDebounce, DEBOUNCE_INTERVAL);
  };

Вот, видно же, что functionToDebounce — это параметр функции и используется в setTimeout.

Это — функция debounce, которую потом можно использовать в своих целях.
Например при ресайзе окна генерится очень много событий resize а вам нужно что тяжелое пересчитать и перерисовать на странице. Вы решаете делать перерисовку только через 500мс после окончания ресайза.
Используя данную функцию вы напишете

window.addEventListener('resize', function(){
  debounce(function(){
    console.log('resize');
  })
})

Вот эта часть кода

function(){
  console.log('resize');
}

и есть functionToDebounce, — функция которая будет выполняться только через 500 мс после последнего вызова.

как понять условие if (lastTimeout)

В javascript нестрогое сравнение. Это значит, что будет использовано приведение типов. Если в переменной ничего нет, значит она не определена, т.е. undefined. Undefined в свою очередь будет приведен в булеву значению false. Когда в lastTimeout будет присвоена ссылка на таймер, значение этой переменной будет приводиться в булеву true.

[olya_097]

Сергей delphinpro, тоесть вот такое

'use strict';

(function () {
  var DEBOUNCE_INTERVAL = 500;

  var lastTimeout;
  window.debounce = function (functionToDebounce) {
    if (lastTimeout) {
      window.clearTimeout(lastTimeout);
    }
    lastTimeout = window.setTimeout(functionToDebounce, DEBOUNCE_INTERVAL);
  };
})();

равноценно такому?

'use strict';

(function () {
  var DEBOUNCE_INTERVAL = 500;

  var lastTimeout;
  window.debounce = function (functionToDebounce) {
    if (lastTimeout) {
      window.clearTimeout(lastTimeout);
    }
     else{    lastTimeout = window.setTimeout(functionToDebounce, DEBOUNCE_INTERVAL);
 };
})();

[Сергей delphinpro]

olya_097, нет.
Напишите два варианта функции.
и запустив оба сравните работу кода

function test() {
  console.log('test');
}

// два раза запускаем оригинал
for (let i = 0; i < 2; i++) debounce1(test);
// в консоли будет один вывод "test"
// через полсекунды после последнего вызова.

// два раза запускаем ваш вариант
for (let i = 0; i < 2; i++) debounce2(test);
// в консоли ничего не будет.

[Сергей delphinpro]

olya_097, Если вы запустите функцию три раза, то во втором варианте вывод будет. В вашем варианте каждый второй вызов очищает таймаут, но не запускает новый отсчет. А именно в этом суть дебаунса — выполнить только последний вызов за определенный временной промежуток.