fonction javascript onkeyup

Question

Possible en double:
Throttle AJAX Request On KeyUp and Paste Events

Disons que j'ai un inputbox dans lequel j'ai appelé fonction ajax sur onkeyup. Lorsque l'utilisateur entre une valeur dans la zone de texte, la valeur passera par la fonction ajax et écrira sur l'image en utilisant gd.

Mais j'ai un problème que lorsque l'utilisateur tapez 10 caractères valeur dans la zone de texte alors ajax fonction appel 10 fois sur onkeyup et il faut beaucoup de temps pour la réponse à écrire sur l'image.

Comment appeler la fonction une seule fois?

Nous pouvons le faire en appelant la fonction sur onblur événement, mais je dois le faire sans quitter la zone de texte.

J'apprécierais n'importe quel type d'aide.

Answer 1

Vous pouvez le faire en construisant un peu d'hystérésis sous la forme d'un appel setTimeout. C'est la réponse typique aux opérations coûteuses qui peuvent être déclenchées à plusieurs reprises. Lorsqu'un keyup se produit, planifiez un délai d'attente de (par exemple) 100ms plus tard. Si un autre keyup se produit dans les 100 ms, annulez le délai précédent et définissez-en un nouveau. Lorsque le délai d'expiration se produit, effectuez l'opération coûteuse.

Par exemple, si votre gestionnaire précédent ressemblait à ceci:

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

... votre nouveau pourrait ressembler à ceci:

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