如何使用节流来获取事件目标？

Question

通过参考本网站， https://codeburst.io/throttling-and-debouncing-in-javascript-646d076d0a44

throttled(delay, fn) {
    let lastCall = 0;
    return function (...args) {
        const now = (new Date).getTime();
        if (now - lastCall < delay) {
            return;
        }
        lastCall = now;
        return fn(...args);
    }
}

我想像这样使用节流功能。

item.addEventListener('click', throttled(2000, func(e.target)));

我必须使用它来获取 e.target.
的值但是，如果您编写此代码，节流功能将无法正常工作。

item.addEventListener('click', (e) => {throttled(2000, func(e.target))});

如何在获取目标点击事件的同时让节流功能正常工作？

Answer 1

您的 throttled 函数将 return 一个围绕您的原始事件处理程序的包装函数。它会将 now - lastCall >= delay 时收到的任何参数传递给 fn 回调函数。
这是您将添加为事件处理程序的包装函数，即 throttled() 的 return 值。

所以您需要传递给 throttled 的只是一个普通的事件处理程序，即您将传递给事件侦听器的相同内容：

// let's be a bit verbose

// our event handler
function handleevent(evt) {
  console.log(evt.clientX); // logging the clientX here because evt.target is a big object for SO's console.
}
// the wrapper function
const myThrottledFunc = throttled(2000, handleevent);
// we add the wrapper as event handler
addEventListener('click', myThrottledFunc);


function throttled(delay, fn) {
  let lastCall = 0;
  return function wrapper(...args) {
    const now = (new Date).getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return fn(...args);
  }
}

click anywhere

或单行onclick = throttled(2000, evt => console.log(evt.target));

Answer 2

您的节流函数需要一个函数作为第二个参数。

假设 func 只是将 e.target 记录到控制台，您可以这样写：

item.addEventListener('click', throttled(2000, func));

和

const func = (e) => console.log(e.target);

或者如果您希望所有内容都在一行中：

item.addEventListener('click', throttled(2000, (e) => func(e.target)));

如何使用节流来获取事件目标？

How can I use throttling with getting an event target?

javascript

events

throttling

ecmascript-6