将 lodash 'throttle' 与 mousemove 事件一起使用答案

【问题标题】：Using lodash 'throttle' with mousemove event将 lodash 'throttle' 与 mousemove 事件一起使用
【发布时间】：2021-10-12 18:19:48
【问题描述】：

我有一个 mousemove 事件侦听器，目标是每 100 毫秒触发一次其中的函数。我发现lodash throttle 函数可以满足我的需要，但我很难实现它。到目前为止，这是我的代码

document.addEventListener('mousemove', e => {
  console.log(e);
  _.throttle(test, 100);
});

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"&gt;&lt;/script&gt;

以及带有 lodash 库的 jsfiddle：

http://jsfiddle.net/c56ebw9d/5/

知道为什么会触发事件日志，但我的测试日志不会触发吗？

【问题讨论】：

标签： javascript lodash

【解决方案1】：

_.throttle() 将返回一个新的节流函数，然后需要为每个事件调用该函数。稍微调整了您的代码：

var throttleFn =  _.throttle(test, 1000);
document.addEventListener('mousemove', throttleFn);

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"&gt;&lt;/script&gt;

【讨论】：

太棒了！第二个似乎最适合我。谢谢！
稍微调整了您的代码 - 第一个答案实际上是不正确的。您每次都必须调用 _.throttle() 返回的相同函数。

【解决方案2】：

如果你在使用 React 时发现了这个问题，那么我发现在重新渲染之间节流函数应该保持不变，这意味着我们必须使用 React 的 UseCallback 函数。这可以通过改变这个来工作：

_.throttle(test, 100);

收件人：

useCallback(_.throttle(test, 100));

【讨论】：