Exécuter la fonction javascript lorsque l'utilisateur a fini de taper au lieu de la touche up?

464

Je veux déclencher une demande ajax lorsque l'utilisateur a fini de taper dans une zone de texte. Je ne veux pas qu'il exécute la fonction à chaque fois que l'utilisateur tape une lettre car cela entraînerait BEAUCOUP de demandes ajax, mais je ne veux pas non plus qu'ils aient à appuyer sur le bouton Entrée.

Existe-t-il un moyen pour que je puisse détecter quand l'utilisateur a fini de taper et ensuite faire la demande ajax?

Utiliser jQuery ici! Dave

David Zorychta
la source
21
Je pense que vous aurez besoin de définir "terminer la saisie" pour nous.
Surreal Dreams
8
Alors que la réponse de @Surreal Dreams répond à la plupart de vos besoins, si l'utilisateur recommence à taper APRÈS le délai spécifié, plusieurs demandes seront envoyées au serveur. Voir ma réponse ci-dessous qui stocke chaque demande XHR dans une variable et l'annule avant d'en lancer une nouvelle. C'est en fait ce que Google fait dans sa recherche instantanée .
Marko
1
doublon possible du délai de keyup jquery?
CMS
1
Et le flou? Je suppose que l'utilisateur a définitivement fini de taper lorsque l'élément d'entrée perd le focus.
Don P
3
Une simple recherche sur Google aurait pu vous donner la
Cannicide

Réponses:

689

Donc, je suppose que terminer la saisie signifie que vous vous arrêtez juste pendant un certain temps, disons 5 secondes. Donc, avec cela à l'esprit, permet de démarrer un minuteur lorsque l'utilisateur relâche une touche et de l'effacer lorsqu'il appuie sur une. J'ai décidé que l'entrée en question serait #myInput.

Faire 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
}
Rêves surréalistes
la source
4
Merci :) J'ai commencé à taper mon commentaire sur la question et j'ai réalisé que j'avais une bonne idée.
Surreal Dreams
26
Cette réponse ne fonctionne pas correctement, elle se déclenchera toujours après 5 secondes, sauf si l'utilisateur tape très lentement. Voir la solution de travail ci-dessous.
aller
3
Si vous rencontrez des problèmes ici, car le minuteur se déclenche immédiatement, essayez d'ajouter des guillemets autour de l'appel de fonction: setTimeout ('functionToBeCalled', doneTypingInterval);
Largo
3
Je vois quelques commentaires où la fonction de rappel, doneTypingdans l'exemple, s'exécute immédiatement. C'est généralement le résultat de l'inclusion accidentelle ()après le nom de la fonction. Notez qu'il ne faut setTimeout(doneTyping,pas liresetTimeout(doneTyping(),
Anthony DiSanti
2
@Jessica pour travailler avec la pâte, vous devez ajouter l'événement 'paste' comme ceci: on ('keyup paste',
Sergey
397

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

Étant donné que typingTimer est parfois défini plusieurs fois (la pression sur la touche deux fois avant le déclenchement de la touche pour les tapeurs rapides, etc.), elle ne s'efface pas correctement.

La solution ci-dessous résout ce problème et appellera X secondes après la fin de l'opération demandée. Il ne nécessite également plus la fonction redondante de keydown. J'ai également ajouté une vérification pour que votre appel de 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 JavaScript vanilla:

//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 elle n'est pas nécessaire ici. Remplacez simplement letpar varet la fonction flèche par une fonction régulière.

Aller
la source
5
Eh bien, il pourrait être utile d'appeler toujours la fonction même si l'entrée est vide. Que faire si vous souhaitez effacer certains résultats de recherche (par exemple) lorsque l'entrée est à nouveau vide?
rvighne
7
Je pense que nous devrions également considérer la condition où l'utilisateur colle simplement la chaîne à l'intérieur du champ.
Vishal Nair
10
utiliser $('#myInput').on('input', function() {si vous voulez que cela fonctionne avec le copier-coller. Je ne vois pas l'intérêt de la vérification si l'entrée est vide. Supposons qu'il veuille effacer ce qu'il a tapé, cela ne fera pas l'appel ajax.
billynoah
3
Pourquoi c'est au if ($('#myInput').val)lieu de if ($('#myInput').val())? Devrait .valêtre une fonction?
wlnirvana
4
Pourquoi ne pas utiliser $ (this) .val ()?
JoelFan
76

C'est juste une ligne avec la fonction anti-rebond underscore.js :

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

Cela dit essentiellement doSomething 500 millisecondes après que j'arrête de taper.

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

bit2pixel
la source
5
Semble également être disponible pour jQuery: code.google.com/p/jquery-debounce et github.com/diaspora/jquery-debounce
koppor
63
Cela m'étonne que les gens vantent "UNE LIGNE DE CODE" comme étant d'une importance cruciale. Génial. UNE LIGNE de code qui nécessite un fichier JS 1.1k pour se charger. Je ne sous-estime pas cela parce que c'est une solution. Mais la chose audacieuse d'une ligne me contrarie et conduit à du code de ballonnement.
Wolfie
1
@Wolfie, je suis d'accord avec vous sur le gonflement du code, mais Underscore et Lodash sont les deux principaux utilitaires dépendants de NPM, donc cela peut être une solution en ligne pour beaucoup de gens.
Paul
3
@Paul Je suis d'accord que si vous chargez les bibliothèques à d'autres fins, c'est bien et réellement bénéfique d'utiliser du code commun. Mais charger un K de code pour une seule ligne n'est pas efficace. Surtout avec les plateformes mobiles devenant de moins en moins de données illimitées. Et de nombreuses zones euro paient également pour Internet par les données. Il est donc bon de faire attention aux ballonnements lorsque cela est raisonnable.
Wolfie
pourquoi j'ai eu:Uncaught ReferenceError: _ is not defined
Wilf
44

Oui, vous pouvez définir un délai de disons 2 secondes sur chaque événement de touche qui déclenchera une demande ajax. Vous pouvez également stocker la méthode XHR et l'abandonner lors d'événements de pression de touche ultérieurs afin d'économiser encore plus de bande passante. Voici quelque chose que j'ai écrit pour un de mes scripts de saisie semi-automatique.

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 t'aides,

Marko

Marko
la source
Je ne recommanderais pas cela. Le code déclenche une demande d'API chaque fois qu'une touche est enfoncée. Il annule ensuite la demande si une autre touche est enfoncée. Même si cette solution empêche le rappel AJAX d'être déclenché pendant que l'utilisateur tape, elle martèlera toujours le serveur avec des requêtes.
lxg
Ixg, non ça ne va pas. La fonction clearTimeout qu'il utilise efface les événements Timeout précédents, invoquant ainsi l'appel API.
John Smith
@JohnSmith, je ne suis pas d'accord, il vaut probablement mieux d'abord effacer le minuteur, puis vérifier si xhr est vide ou quelle que soit votre condition et enfin exécuter le minuteur avec l'appel ajax
Fleuv
20
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/

azzy81
la source
Cela a fonctionné pour moi, mais gardez à l'esprit que lorsque l'utilisateur clique sur la zone de texte, vous n'obtiendrez pas d'événement de frappe car il a perdu le focus à ce stade. Le paramétrer sur keydown à la place semble résoudre le problème.
horatius83
12

Les deux principales réponses ne fonctionnent pas pour moi. Voici donc ma solution:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});
YSFKBDY
la source
11

J'aime la réponse de Surreal Dream, mais j'ai trouvé que ma fonction "doneTyping" se déclencherait pour chaque pression de touche, c'est-à-dire si vous tapez "Bonjour" très rapidement; au lieu de tirer une seule fois lorsque vous arrêtez de taper, la fonction se déclenche 5 fois.

Le problème était que la fonction javascript setTimeout ne semble pas écraser ou tuer les anciens délais d'expiration qui ont été définis, mais si vous le faites vous-même, cela fonctionne! Je viens donc d'ajouter un appel clearTimeout juste avant le setTimeout si le typingTimer est défini. Voir ci-dessous:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

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

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

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

NB J'aurais aimé ajouter ceci en tant que commentaire à la réponse de Surreal Dream mais je suis un nouvel utilisateur et je n'ai pas assez de réputation. Désolé!

Liam Flanagan
la source
10

Modification de la réponse acceptée pour gérer des cas supplémentaires tels que la pâte:

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

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}
Jecoms
la source
6

Je ne pense pas que l'événement keyDown soit nécessaire dans ce cas (veuillez me dire pourquoi si je me trompe). Dans mon script (non jquery), une solution similaire ressemble à ceci:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

C'est ma première réponse sur Stack Overflow, donc j'espère que cela aidera quelqu'un, un jour :)

Rafal Pastuszak
la source
6

Déclarez la delayfonction suivante :

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})()

puis l'utiliser:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    
Fabian Bigler
la source
Votre solution est fantastique, mon frère!
Développeur
1
@Developer Merci beaucoup. J'ai également ajouté une autre réponse pour résoudre un scénario un peu plus complexe (plusieurs contrôles par page).
Fabian Bigler
bonne solution. Je l'utilise, mais au lieu de
keydown
Avec l'événement keyup, cela a très bien fonctionné pour moi. Merci.
Sinan Eldem
6

Réponse tardive mais je l'ajoute parce que c'est 2019 et c'est entièrement réalisable en utilisant la jolie ES6, pas de bibliothèques tierces, et je trouve que la plupart des réponses très cotées sont volumineuses et alourdies avec trop de variables.

Solution élégante tirée de cet excellent article de blog.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))
GrayedFox
la source
1
Cela devrait vraiment être la meilleure réponse étant donné l'année
Dark Hippo
4

Eh bien, à proprement parler non, car l'ordinateur ne peut pas deviner quand l'utilisateur a fini de taper. Vous pouvez bien sûr déclencher une minuterie à la clé et la réinitialiser à chaque touche suivante. Si la minuterie expire, l'utilisateur n'a pas tapé pendant la durée de la minuterie - vous pourriez appeler cela "fini de taper".

Si vous vous attendez à ce que les utilisateurs fassent des pauses lors de la frappe, il n'y a aucun moyen de savoir quand ils ont terminé.

(À moins bien sûr que vous puissiez dire à partir des données quand elles sont terminées)

sleske
la source
3

J'ai l'impression que la solution est un peu plus simple avec l' inputévénement:

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}
Adrien Brunelat
la source
3

d'accord avec la réponse de @going. Une autre solution similaire qui a fonctionné pour moi est celle ci-dessous. La seule différence est que j'utilise .on ("input" ...) au lieu de keyup. Cela capture uniquement les changements dans l'entrée. les autres touches comme Ctrl, Shift etc. sont ignorées

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

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});
Grace.io
la source
3

Je viens de trouver un code simple pour attendre que l'utilisateur ait fini de taper:

Étape 1: définissez le délai d'expiration sur null, puis effacez le délai d'expiration actuel lorsque l'utilisateur tape.

Étape 2: déclenchez un délai d'expiration clair pour la variable définir avant que l'événement de keyup ne soit déclenché

étape 3. définir le délai d'expiration de la variable déclarée ci-dessus;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

code javascript

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};
Nevil Saul Blemuss
la source
1
la question est déjà répondue ... et elle est assez similaire à ceci
Mixone
3

J'implémentais la recherche sur ma fiche et j'avais besoin qu'elle soit basée sur ajax. Cela signifie qu'à chaque changement de clé, les résultats de recherche doivent être mis à jour et affichés. Cela se traduit par autant d'appels ajax envoyés au serveur, ce qui n'est pas une bonne chose.

Après quelques travaux, j'ai fait une approche pour envoyer une requête ping au serveur lorsque l'utilisateur arrête de taper.

Cette solution a fonctionné pour moi:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

Vous remarquerez qu'il n'est pas nécessaire d'utiliser un minuteur lors de l'implémentation.

Ata ul Mustafa
la source
2

Voici le code JS simple que j'ai écrit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>
Alfredo Lingoist Jr.
la source
1

Vous pouvez utiliser l'événement onblur pour détecter le moment où la zone de texte perd le focus: https://developer.mozilla.org/en/DOM/element.onblur

Ce n'est pas la même chose que "arrête de taper", si vous vous souciez du cas où l'utilisateur tape un tas de trucs et reste assis là avec la zone de texte toujours focalisée.

Pour cela, je suggère de lier un setTimeout à l'événement onclick, et en supposant qu'après x durée sans touches, l'utilisateur a cessé de taper.

Mike Ruhlin
la source
1

Pourquoi ne pas simplement utiliser onfocusout?

https://www.w3schools.com/jsreF/event_onfocusout.asp

S'il s'agit d'un formulaire, ils laisseront toujours le focus de chaque champ de saisie afin de cliquer sur le bouton Soumettre afin que vous sachiez qu'aucune entrée ne manquera de faire appeler son gestionnaire d'événements onfocusout.

Coffeeeee
la source
1
onfocusout avait un faible soutien lorsque la question a été posée (il y a près de 7 ans maintenant), et l'effet avec onfocusout serait quelque peu différent. Vous devez attendre que l'utilisateur laisse le focus sur l'élément alors qu'avec la solution timeout / debounce, il "se déclenche" dès que l'utilisateur arrête de taper et que l'utilisateur n'est pas obligé de changer de focus. Un exemple de cas d'utilisation serait l'un de ces formulaires d'enregistrement où lorsque l'utilisateur cesse de saisir un nom d'utilisateur potentiel, une coche ou "X" apparaît à droite du champ du formulaire indiquant que le nom est disponible.
David Zorychta
si la barre de recherche est sur le focus, personne n'a besoin de sortir, après un certain temps, le résultat sera directement affiché car plus aucun texte n'est en cours de frappe
P Satish Patro
1

S'il est nécessaire que l'utilisateur s'éloigne du champ, nous pouvons utiliser "onBlur" au lieu d'Onchange en Javascript

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

Si ce n'est pas nécessaire, régler la minuterie serait la bonne option.

Jayabharathi Palanisamy
la source
0

Une fois que vous avez détecté le focus sur la zone de texte, à la clé, effectuez une vérification du délai d'expiration et réinitialisez-la chaque fois qu'elle est déclenchée.

Une fois le délai écoulé, faites votre demande ajax.

ocodo
la source
0

Si vous recherchez une longueur spécifique (comme un champ de code postal):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });
Jason
la source
Ce n'est pas une mauvaise idée de faire une validation limitée avant d'envoyer la demande ajax.
chim
0

Je ne sais pas si mes besoins sont juste un peu bizarres, mais j'avais besoin de quelque chose de similaire à cela et c'est ce que j'ai fini par utiliser:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Ce qui me permet d'avoir des éléments comme celui-ci dans ma candidature:

<input type="text" data-url="/controller/action/" class="update">

Qui sont mis à jour lorsque l'utilisateur a "fini de taper" (aucune action pendant 2 secondes) ou passe à un autre champ (brouille l'élément)

Paolo Bergantino
la source
0

Si vous devez attendre que l'utilisateur ait fini de taper, utilisez simplement ceci:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Exemple complet avec appel ajax - cela fonctionne pour mon téléavertisseur - nombre d'éléments par liste:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    
Miroslav Siska
la source
0

Minuteries multiples par page

Toutes les autres réponses ne fonctionnent que pour un seul contrôle ( mon autre réponse incluse). Si vous avez plusieurs contrôles par page (par exemple dans un panier), seul le dernier contrôle où l'utilisateur a tapé quelque chose sera appelé . Dans mon cas, ce n'est certainement pas le comportement souhaité - chaque contrôle doit avoir sa propre minuterie.

Pour résoudre ce problème, vous devez simplement passer un ID à la fonction et maintenir un dictionnaire timeoutHandles comme dans le code suivant:

Déclaration de fonction:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Utilisation de la fonction:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);
Fabian Bigler
la source
0

Simple et facile à comprendre.

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});
Juil.
la source
0

Pour passer des paramètres à votre fonction avec la syntaxe ES6.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}
ajinkya
la source
-2

Wow, même 3 commentaires sont assez corrects!

  1. L'entrée vide n'est pas une raison pour ignorer l'appel de fonction, par exemple, je supprime le paramètre de déchets de l'URL avant la redirection

  2. .on ('input', function() { ... });doit être utilisé pour déclencher keyup, pasteet les changeévénements

  3. définitivement .val()ou .valuedoit être utilisé

  4. Vous pouvez utiliser la $(this)fonction d'événement interne au lieu de #idtravailler avec plusieurs entrées

  5. (ma décision) J'utilise la fonction anonyme au lieu de doneTypingdans setTimeoutd'accéder facilement à $(this)partir N.4, mais vous devez d' abord l' enregistrer commevar $currentInput = $(this);

EDIT Je vois que certaines personnes ne comprennent pas les instructions sans la possibilité de copier-coller du code prêt. Vous voilà

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});
Vladkras
la source
Comment cela répond à la question?
Thomas Orlita
@ThomasOrlita cette réponse complète les 3 réponses les plus appréciées. Jetez un oeil à celui qui est accepté: 1. il ne prend pas en charge paste, il n'utilise pas this, etc. (je pense que c'est important mais je ne veux pas me perdre dans des tonnes de commentaires)
vladkras
1
Cela ne répond pas à la question. Si vous souhaitez commenter une autre réponse, il existe un système de commentaires (je l'utilise en ce moment!)
GrayedFox