2

重複の可能性:
KeyUp および Paste イベントで AJAX 要求を抑制

inputboxで ajax 関数を呼び出した があるとしますonkeyup。ユーザーがテキストボックスに値を入力すると、その値は ajax 関数を通過し、gd を使用して画像に書き込まれます。

しかし、ユーザーがテキストボックスに10文字の値を入力すると、ajax関数が10回呼び出されonkeyup、応答が画像に書き込まれるまでに時間がかかるという問題があります。

関数を一度だけ呼び出すにはどうすればよいですか?

イベントで関数を呼び出すことで実行できますがonblur、テキスト ボックスを離れずに実行する必要があります。

あらゆる種類の助けをいただければ幸いです。

4

2 に答える 2

5

setTimeoutこれは、呼び出しの形で少しヒステリシスを組み込むことで実現できます。これは、繰り返しトリガーされる可能性のある高価な操作に対する典型的な応答です。が発生したら、keyup(たとえば) 100 ミリ秒後にタイムアウトをスケジュールします。その 100 ミリ秒以内に別keyupのタイムアウトが発生した場合は、以前のタイムアウトをキャンセルして、新しいタイムアウトを設定します。タイムアウトが発生したら、コストのかかる操作を実行します。

たとえば、以前のハンドラーが次のようになっているとします。

function handleKeyUp() {
    doThisExpensiveThing();
    doThatExpensiveThing();
    doAnotherExpensiveThing();
}

...新しいものは次のようになります。

var keyupTimer = 0; // 0 is a safe "no timer" value, setTimeout never returns 0
function handleKeyUp() {
    // Have an outstanding call?
    if (keyupTimer) {
        // Yes, clear it
        clearTimeout(keyupTimer);
    }

    // Set a new call to occur in 100ms
    keyupTimer = setTimeout(doExpensiveStuff, 100);
}

function doExpensiveStuff() {
    // Clear the timer handle so we know we don't have a call pending
    keyupTimer = 0;

    // Do the expensive stuff
    doThisExpensiveThing();
    doThatExpensiveThing();
    doAnotherExpensiveThing();
}
于 2012-12-05T13:00:37.057 に答える
2

JS:

<script>
var timeout;

function keyUp( value ) {
 clearTimeout( timeout );

 timeout = setTimeout( function() {
  // Ajax code here
 }, 500 );
}
</script>

HTML:

<input type="text" onkeyup="keyUp(this.value)" />
于 2012-12-05T13:03:25.513 に答える