多次下划线去抖动调用答案

【问题标题】：Underscore Debounce Calling Multiple Times多次下划线去抖动调用
【发布时间】：2018-08-29 13:11:53
【问题描述】：

调用_.debounce() 会导致函数在延迟后执行多次而不是一次。如何让_.debounce() 中的函数在指定延迟后执行一次？我的用例是在用户停止输入后执行 AJAX 请求。

例如，在输入中输入会导致 1 秒后控制台中出现一条消息。在我的示例中，您将看到出现多条消息（您键入的每个字母都有一条消息）。如何修改我的代码以只看到一条消息？

function onKeyUp() {
    _.debounce(() => {
        console.log('foo');
    }, 1000)();
}
<input onkeyup="onKeyUp()" />

【问题讨论】：

你试过 _.throttle() 吗？
@Radioreve 我相信_.throttle() 与我想要的相反。我希望在用户完成输入后执行 AJAX 请求。我相信_.throttle() 会让我在用户开始输入时执行 AJAX 请求，而不是在他们完成输入时。

【解决方案1】：

您正在为每个按键事件创建一个新的去抖动函数。相反，您需要创建一次并在（或代替）onKeyUp 事件处理程序中使用此函数。

var handler = _.debounce(() => {
  console.log('foo');
}, 1000)

function onKeyUp() {
  handler();
}

<script src="http://underscorejs.org/underscore-min.js"></script>
<input onkeyup="onKeyUp()" />

【讨论】：

handler 是变量而不是函数有什么原因吗？即：function handler() { return (_.debounce(() => { console.log('foo'); }, 1000)); }
澄清一下，handler 是函数表达式而不是函数声明是否有原因？如何让上述代码与 handler 作为函数声明一起使用？
@Jon _.debounce() 创建并返回传递函数的新去抖动版本。为了能够使用这个新功能，我们需要将它存储在某个地方。这就是为什么它被存储为一个变量。它不适用于带有函数声明的示例，因为在这种情况下，每次调用 handler() 时都会执行 _.debounce()，这会导致创建一个新的去抖动函数而不是使用它。
@Jon 更准确地说，handler 在我的示例中不是函数表达式。这只是一个常见的表达方式，例如var a = 5; 这里是an example 有一些 cmets 来澄清这一点。