Question

我正在尝试学习在javascript中实现反跳功能，但是出现错误“未捕获的TypeError：无法读取未定义的属性'clientX'”。我可以知道如何解决它吗？

此外，我还是很困惑：

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

我知道去抖动的主要思想是当我们没有移动鼠标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));

Answer 1

您需要确保使用事件获取的参数调用回调。因此，无论是直接调用还是通过反跳调用，它对于事件处理程序都是透明的。

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>

对JavaScript中的反跳功能和“无法读取未定义的属性'clientX'”感到困惑

1 个答案: