的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

回答

相關問題