Exécuter la fonction javascript quand l'utilisateur a fini de taper au lieu de le faire quand il appuie sur la touche ?

Question

Je veux déclencher une requête ajax lorsque l'utilisateur a fini de taper dans une zone de texte. Je ne veux pas que la fonction soit exécutée à chaque fois que l'utilisateur tape une lettre, car cela entraînerait BEAUCOUP de requêtes ajax, mais je ne veux pas non plus qu'il doive appuyer sur le bouton d'entrée.

Existe-t-il un moyen de détecter quand l'utilisateur a fini de taper et d'effectuer ensuite la requête ajax ?

Utilisation de jQuery ici ! Dave

Answer 1

Donc, je vais supposer que finir de taper signifie que vous vous arrêtez pendant un moment, disons 5 secondes. Donc, avec cela à l'esprit, nous allons démarrer un minuteur lorsque l'utilisateur relâche une touche et l'effacer lorsqu'il en appuie une. J'ai décidé que l'entrée en question serait #myInput.

Je fais quelques hypothèses...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Answer 2

La réponse choisie ci-dessus ne fonctionne pas.

Parce que typingTimer est parfois activé plusieurs fois (touche pressée deux fois avant que touche pressée ne soit déclenchée pour les dactylographes rapides, etc.), il ne s'efface pas correctement.

La solution ci-dessous résout ce problème et appelle X secondes après la fin de l'opération, comme demandé par le PO. Elle ne nécessite plus non plus la fonction redondante keydown. J'ai également ajouté une vérification pour que l'appel de la fonction ne se produise pas si votre entrée est vide.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Et le même code dans la solution vanilla JavaScript :

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Cette solution utilise ES6 mais ce n'est pas nécessaire ici. Il suffit de remplacer let avec var et la fonction flèche avec une fonction régulière.

Answer 3

C'est juste une ligne avec underscore.js fonction de débordement :

$('#my-input-box').keyup(_.debounce(doSomething , 500));

Cela dit en gros fairequelquechose 500 millisecondes après que j'ai arrêté de taper.

Pour plus d'informations : http://underscorejs.org/#debounce

Answer 4

Oui, vous pouvez définir un délai d'attente de 2 secondes, par exemple, pour chaque événement de frappe qui déclenchera une requête ajax. Vous pouvez également stocker la méthode XHR et l'interrompre sur les événements de pression de touche suivants afin d'économiser encore plus de bande passante. Voici quelque chose que j'ai écrit pour un script d'autocomplétion.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

J'espère que cela vous aidera,

Marko

Answer 5

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

exemple complet ici : http://jsfiddle.net/ZYXp4/8/