的onkeyup功能的JavaScript

可能重复：
Throttle AJAX Request On KeyUp and Paste Events 的onkeyup功能的JavaScript

比方说，我有一个inputbox中，我已经呼吁onkeyup AJAX功能。当用户在文本框中输入任何值时，该值将通过ajax函数并使用gd写入图像。

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

如何只能调用一次函数？

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

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

2012-12-05 Jimmy

您可以通过调用setTimeout呼叫的形式创建一些滞后来完成此操作。这是对可能重复触发的昂贵操作的典型响应。当发生keyup时，为100ms（例如）计划一个超时。如果在该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(); 
}

来源

2012-12-05 13:00:37

@Jimmy：我想我会把它作为读者的练习。 :-)你应该可以直接应用上面的内容。 –

ok thanx T.J.Crowder – Jimmy

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-05 13:03:25

的onkeyup功能的JavaScript

回答

相关问题