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

Question

由于'changeCursor'事件(我使用ACE编辑器)，我的一个脚本在某些时候调用一个函数。当我多次按下光标时，这会减慢光标的移动速度。

我真的希望这个函数被调用，但是如果它只在我的光标停止移动时被调用(也就是说，我不需要看到中间状态)。

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

Answer 1

经典的方法是使用一个短超时:

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

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

知道事件已经停止的唯一方法是等待一段很短的时间并且检测到没有进一步的运动(这就是它所做的)。对于滚动事件，通常使用类似的逻辑。

Answer 2

对于这个问题，它可能是多余的，但是检查RxJS: http://reactive-extensions.github.com/RxJS/#What是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