addEventListener事件节流如何传递事件参数

Question

function tagLocation(e) {
    console.log(e);
// console.log(e.offsetX, e.offsetY);
}

function throttleFn(fn, delay = 1000) {
    let _this = this;

    let exec = 0;
    function throttle(_this, ...args) {
      let elapsed = Date.now() - exec;

      if (elapsed > delay) {
        exec = Date.now();
        fn.apply(_this, ...args);
      }
    }

    return throttle;
}
document
        .querySelector(".container")
        .addEventListener("mousemove", throttleFn(tagLocation, 16));

如何将事件参数传递给tagLocation方法

Answer 1

function throttleFn(fn, delay = 1000) {

    let exec = 0;
    function throttle(...args) {
      let elapsed = Date.now() - exec;

      if (elapsed > delay) {
        exec = Date.now();
        fn.apply(this, args);
      }
    }

    return throttle;
}

Answer 2

防抖 和 节流函数得益于JS的语言特性
只要函数内部AO有外部引用，那么垃圾回收机制就不会清除这个栈空间
知道这个道理后，函数就比较好使用了。
节流函数类似这样：

export const throttle = (func, delay) => {
  var prev = Date.now()
  return function() {
    var context = this
    var args = arguments
    var now = Date.now()
    if (now - prev >= delay) {
      func.apply(context, args)
      prev = Date.now()
    }
  }
}

在使用它的时候，我们先需要它返回的函数

const throttleFn = throttle(e => {
    //...逻辑代码
}, 16)

然后调用这个函数

element.addEventListener('mousemove' ,throttleFn)

这样由于元素事件会默认把对象event传给handler，
所以在throttleFn中已经可以使用e对象参数了。

题中，由于你是把匿名函数单独拿出来所以在格式上看起来可读性不是那么高
如果你想传递额外参数，直接在后面连着调用就可以了，如下：

throttleFn(tagLocation, 16)('额外的参数');