下划线辩护多次呼叫

Question

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

例如,输入输入将导致消息在1秒后出现在控制台中.在我的示例中,您将看到多条消息(您键入的每个字母都有一条消息).如何修改我的代码才能看到一条消息？

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

Answer 1

您正在为每个keyup事件创建一个新的debounced函数.相反,您需要创建一次并在内部(或代替)onKeyUp事件处理程序中使用此函数.

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

function onKeyUp() {
  handler();
}

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

澄清一下，`handler` 是函数表达式而不是函数声明是否有原因？我如何让上面的代码与`handler` 作为函数声明一起使用？ (2认同)
@Jon [_.debounce()](http://underscorejs.org/#debounce) 创建并返回传递函数的新去抖动版本。为了能够使用这个新函数，我们需要将它存储在某个地方。这就是为什么它被存储为变量的原因。它不会在您的带有函数声明的示例中工作，因为在这种情况下，每次调用 `handler()` 时，您都会执行 `_.debounce()`，这会导致创建一个新的 debaunced 函数而不是使用它。 (2认同)
@Jon 更准确地说，我的示例中的 `handler` 不是函数表达式。这只是一个常见的表达方式，如 `var a = 5;` 这里是 [一个例子](https://jsfiddle.net/4sc9wL5t/14/) 有一些注释来澄清这一点。 (2认同)