php - onkeyup 函数 javascript

Question

可能重复：
在 KeyUp 和 Paste 事件上限制 AJAX 请求

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

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

我怎样才能只调用一次函数？

我们可以通过在onblur事件上调用函数来做到这一点，但我需要在不离开文本框的情况下做到这一点。

我将不胜感激任何类型的帮助。

Answer 1

setTimeout您可以通过以调用的形式建立一点滞后来做到这一点。这是对可能重复触发的昂贵操作的典型响应。当 akeyup发生时，安排（比如说）100 毫秒后的超时。如果keyup在这 100 毫秒内发生另一个超时，则取消之前的超时并设置一个新超时。当超时发生时，执行昂贵的操作。

例如，如果您之前的处理程序如下所示：

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