Question

我在阅读本文后发现去抖是如何工作的： Can someone explain the "debounce" function in Javascript

在这个问题中，接受的答案中有些东西我无法弄清楚它是怎么样的：

“请注意，这会覆盖超时值，并且此值会持续多个函数调用！”

每次调用debounce方法时，它都会为它创建一个新堆栈，返回的函数可以访问超时值。是的，我理解为关闭的本质。但是在多次调用中，我们得到的包装器去抖将产生一个新的本地超时，那么如何才能清除以前调用中的超时，因为它们没有绑定到相同的超时？

非常感谢，我知道这是非常基本的JS，但我不想忽视它，因为我知道，如果理解它，我可以更多地了解JS。

Answer 1

您可能会感到困惑的是，您不会反复拨打debounce()。如果你这样做，那么是的，timeout变量对于每次调用都是唯一的。

您所做的只是致电debounce() 一次。它返回一个函数，然后您可以重复调用它。因为此函数与debounce()变量一起嵌套在timeout内，所以每次调用它时，它都使用相同的timeout变量。

David Walsh's article有一个例子：

var myEfficientFn = debounce( function() {
    // All the taxing stuff you do
}, 250 );

window.addEventListener( 'resize', myEfficientFn );

请注意，我们只在此处调用debounce()，并返回一个保存为myEfficientFn的函数。然后在每个myEfficientFn事件上调用resize，但传递到debounce()的回调函数仅在250毫秒不再有resize个事件后调用。

您也可以将该代码等效地编写为：

window.addEventListener( 'resize', debounce( function() {
    // All the taxing stuff you do
}, 250 ) );

这里看起来好像你多次打电话给debounce()，但事实并非如此。在您拨打addEventListener()时，它只会被调用一次。这里的实际事件监听器函数不是debounce()，而是debounce() 返回的函数。

或者，为了更加清晰，让我们一步一步地分解并使用更好的名称：

// Called after at least one resize event has fired but 250 milliseconds
// have gone by without another resize event.
function handleResizeAfterIdle() {
    // All the taxing stuff you do
}

// Create a function with debouncing that can be used as a resize event
// listener. resizeListener will be called on *every* resize event,
// but handleResizeAfterIdle will be called only after 250 milliseconds
// have elapsed with no more resize events.
var resizeListener = debounce( handleResizeAfterIdle, 250 );

// Now we can add the event listener.
window.addEventListener( 'resize', resizeListener );

辩论结束

1 个答案: