onkeyup函数javascript

Question

可能重复:
在KeyUp和粘贴事件上调节AJAX请求

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

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

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

我们可以通过调用onblur事件上的函数来完成它,但我需要在不离开文本框的情况下完成它.

我会很感激任何类型的帮助.

Answer 1

您可以通过以setTimeout呼叫形式构建一些滞后来实现此目的.这是对可能重复触发的昂贵操作的典型响应.keyup发生a 时,计划超时(比方说)100ms.如果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();
}