5

「changeCursor」イベントが原因で、ある時点でスクリプトの 1 つが関数を呼び出します (私は ACE エディターを使用しています)。これにより、カーソルを何度も押すとカーソルの動きが遅くなります。

私は本当にこの関数を呼び出したいのですが、カーソルの移動が停止したときにのみ呼び出されれば問題ありません (つまり、中間状態を確認する必要はありません)。

最後のイベント以外をすべて無視する標準的な方法はありますか?

4

2 に答える 2

6

古典的な方法は、短いタイムアウトを使用することです。

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

}

通常のコードはchangeCursor()変更されるたびに呼び出しを続けることができますが (今と同じように)、内部の実際のコードsetTimeout()は、最後の 500 ミリ秒でカーソル変更イベントが発生しなかった場合にのみ実行されます。その時間値は必要に応じて調整できます。

イベントが停止したことを知る唯一の方法は、しばらく待機し、それ以上の動きを検出しないことです (これが行われることです)。スクロール イベントで同様のロジックを使用するのが一般的です。

于 2013-03-17T20:45:51.223 に答える
1

この1つの問題ではやり過ぎかもしれませんが、RxJSをチェックしてください：http：//reactive-extensions.github.com/RxJS/#RxJSとは何ですか？

JavaScriptのイベントストリームを「クエリ/操作」するための非常に強力なメソッドがいくつか追加されています。 https://github.com/Reactive-Extensions/RxJS/wiki/Observable

この場合、「スロットル」方式があなたの目的です。これは、キーアップイベントでスロットルを使用してウィキペディアの一致のオートコンプリートを作成する例です。 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
于 2013-03-17T21:33:51.660 に答える