Question

可能重复：
Throttle AJAX Request On KeyUp and Paste Events

假设我有一个inputbox我在onkeyup上调用了ajax函数。当用户在文本框中输入任何值时，该值将通过ajax函数并使用gd在图像上写入。

但我有问题，当用户在文本框中输入10个字符值时，ajax函数会在onkeyup上调用10次，并且在图像上写入时需要很长时间。

我怎样才能只调用一次功能？

我们可以通过调用onblur事件上的函数来实现，但我需要在不离开文本框的情况下执行此操作。

我很感激任何类型的帮助。

Answer 1

您可以通过以setTimeout调用的形式构建一些滞后来实现此目的。这是对可能重复触发的昂贵操作的典型响应。发生keyup时，计划超时（比方说）100毫秒。如果在该100ms内发生另一个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();
}

Answer 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)" />

onkeyup函数javascript

2 个答案: