javascript - 如何忽略除了一系列快速 Javascript 事件中的最后一个事件之外的所有事件？

Question

由于“changeCursor”事件（我使用的是 ACE 编辑器），我的一个脚本有时会调用一个函数。当我多次按下光标时，这会减慢光标的移动速度。

我真的很想调用这个函数，但是如果只在我的光标停止移动时调用它就可以了（即我不需要查看中间状态）。

是否有一种标准方法可以忽略除最后一个事件之外的所有事件？

Answer 1

经典的方法是使用短暂的超时：

var cursorTimer;
function changeCursor() {
    clearTimeout(cursorTimer);
    cursorTimer = setTimeout(function() {
        // process the actual cursor change here
    }, 500);

}

您的常规代码可以在changeCursor()每次更改时继续调用（就像现在一样），但内部的实际代码setTimeout()仅在最后 500 毫秒内没有发生光标更改事件时才会执行。您可以根据需要调整该时间值。

知道事件已经停止的唯一方法是等待一小段时间并且没有检测到进一步的运动（这就是这样做的）。滚动事件通常使用类似的逻辑。

Answer 2

这个问题可能有点过分了，但请查看 RxJS：http ://reactive-extensions.github.com/RxJS/#What is RxJS?

它为 JavaScript 中的“查询/操作”事件流添加了一些非常强大的方法。 https://github.com/Reactive-Extensions/RxJS/wiki/Observable

在这种情况下，“节流”方法就是您所追求的。这是一个使用 Throttle 和 keyup 事件来创建维基百科匹配的自动完成的示例。 https://github.com/Reactive-Extensions/RxJS-Examples/blob/master/autocomplete/autocomplete.js

// Get all distinct key up events from the input and only fire if long enough and distinct
var keyup = Rx.Observable.fromEvent(input, 'keyup').select(function (e) {
    return e.target.value; // Project the text from the input
})
.where(function (text) {
    return text.length > 2; // Only if the text is longer than 2 characters
})
.throttle(
    750 // Pause for 750ms
)
.distinctUntilChanged(); // Only if the value has changed