Смущает функция debounce в javascript и «Не удается прочитать свойство clientX» из неопределенного » - PullRequest
Новая
       18

Смущает функция debounce в javascript и «Не удается прочитать свойство clientX» из неопределенного »

0 голосов
/ 31 мая 2019

Я пытаюсь научиться реализовывать debouncing в javascript, однако я получил ошибку "Uncaught TypeError: Невозможно прочитать свойство 'clientX' из неопределенного".Могу ли я узнать, как это исправить?

Кроме того, я все еще очень озадачен: 

function debounce (func, wait) {
  var timeoutID;
  return function () {
    clearTimeout(timeoutID);
    timeoutID = setTimeout(func, wait);
  }
}

Я знаю, что основная идея debounce - запускать функцию, когда мы не перемещаем мышь в течение 2 секунд, еслимы переместились в течение 2 секунд, счетчик будет очищен и снова пересчитан с самого начала, но я все еще не понимаю код.Почему мы устанавливаем переменную timeoutID в начале функции?Как это определить как timeoutID, который мы установили внутри возвращаемой функции?почему мы тогда «возвращаем» функцию таймера?Когда он вызывается впервые, var timeoutID просто инициирует эту переменную без значения, тогда как clearTimeout (timeoutID) может использовать эту переменную без значения?Большое вам спасибо! 

function debounce (func, wait) {
  var timeoutID;
  return function () {
    clearTimeout(timeoutID);
    timeoutID = setTimeout(func, wait);
  }
}
function test(e) {
  console.log(e.clientX);
}

document.addEventListener('mousemove', debounce(test,2000));

1 Ответ

0 голосов
/ 31 мая 2019

Вы должны обязательно вызвать обратный вызов с аргументами, которые получает событие. Таким образом, он является прозрачным для обработчика событий, если он был вызван напрямую или из debounce. 

function debounce (callback, delay) {
  var timeout;
  
  return function () {
    var originalArguments = arguments;
    
    clearTimeout(timeout);
    timeout = setTimeout(() => callback.apply(this, originalArguments), delay);
  }
}

function test(e) {
  console.log(this);
  console.log(e.target);
}

document.getElementById('thing').addEventListener('click', debounce(test, 2000));
<a href="#" id="thing" data-thing="test">Click Me Repeatedly</a>
...