onkeyup函数JavaScript

Question

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

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

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

我怎么能只调用一次功能？

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

任何类型的帮助我都会感激。

Answer 1

您可以通过以setTimeout调用的形式构建一些滞后的方法来实现这一点。这是对可能重复触发的昂贵操作的典型响应。当发生keyup时，将超时时间安排在100 for之后。如果在该100 If内发生了另一个keyup，则取消先前的超时，并设置一个新的超时。当超时发生时，执行昂贵的操作。

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

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

...your的新版本可能如下所示：

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

联署材料：

<script>
var timeout;

function keyUp( value ) {
 clearTimeout( timeout );

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

HTML：

<input type="text" onkeyup="keyUp(this.value)" />