La fonction d'exécution après que l'utilisateur a cessé de taper

J'ai un champ de saisie dans laquelle l'utilisateur peut saisir une valeur de type long. Cette valeur est ensuite utilisée comme valeur d'entrée dans un complexe de temps de la fonction.

Ma question est: comment puis-je commencer l'exécution de cette fonction environ 1 seconde après que l'utilisateur a terminé sa frappe? (Je ne veux pas l'exécuter après chaque pression sur la touche car il est vraiment le ralentissement de la page). Donc, si sa frappe suivante est dans le 1s limite à partir de la dernière course de touche, que d'attendre qu'une seconde.

Avez-vous des suggestions?

autre remarque: j'ai aussi besoin de passer des paramètres dans cette fonction

voulez-vous exécuter une fois qu'il est complètement fini de taper? comme si il se concentre hors de la zone de texte? ou effectivement, entre les frappes?
Je sais comment l'exécuter une fois que l'entrée a perdu le focus, mais ce n'est pas ce que je veux faire. L'utilisateur ne devrait pas être obligé de quitter l'entrée une fois, il veut voir le résultat. Donc, il devrait être affiché si il n'est pas écrit pendant 1 seconde et non pas sur l'objet perdu.

InformationsquelleAutor Matej Tymes | 2011-05-10

24

Voici une ébauche : http://jsfiddle.net/jomanlk/msmJp/

Utilise setTimeout et clearTimeout

JS:
```
var timer = null;
    $('#text').keydown(function(){
           clearTimeout(timer); 
           timer = setTimeout(doStuff, 1000)
    });
    
    function doStuff() {
        alert('do stuff');
    }
```
HTML:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='text'>
```
- ne pas le doStuff dans setTimeout être entre parenthèses? Aussi mon problème est que je veux y passer certaines valeurs de la variable.
- nope, pas nécessaire. Vous êtes de passage d'une fonction de référence. Voici un exemple qui utilise les paramètres de l'extérieur de la portée : jsfiddle.net/jomanlk/msmJp/1
- cela m'a aidé. Merci.
- Keyup au lieu de keydown ferait un peu plus de sens, puisque nous sommes à la recherche pour que lorsque l'utilisateur a arrêté la frappe.
InformationsquelleAutor JohnP
3

C'est vraiment la fin, je sais, mais j'ai vraiment détesté les lignes de code nécessaires pour atteindre ce à chaque fois qu'il a été nécessaire, donc j'ai extrait la logique dans une page de l'initiation de la fonction qui ne fonctionne qu'une fois.
```
(function(){
    var keystoppedTimer = null;
    var keystoppedInputs = document.getElementsByTagName('input');
    for (var i = 0, l = keystoppedInputs.length; i < l; i++) {
        keystoppedInputs[i].addEventListener('keydown', function(event){
            clearTimeout(keystoppedTimer);
            keystoppedTimer = setTimeout(function() {
                event.target.dispatchEvent( new Event('keystopped') );
            }, 600);
        }, false);
    }
}());
```
L'ajout de cette (pensez-y comme un polyfill), permet beaucoup plus simple d'utilisation. Tout ce que vous devez faire pour cible l'utilisateur d'arrêt de frappe, c'est d'ajouter un écouteur d'événement pour votre élément de ciblage "keystopped'.
```
inputElement.addEventListener('keystopped', function(event){
    console.log('Stopped typing');
}, false);
```
J'ai pris keystopped, car il correspond keydown, keyup, etc.
- Merci! J'ai utilisé input au lieu de keydown, de sorte qu'il fonctionne avec copie&coller ou glisser un texte.
- Génial!! J'ai utilisé le document.querySelectorAll('input,textarea'); pour la capture de ces éléments
InformationsquelleAutor Andy Mercer

Utiliser le bindWithDelay plugin jQuery:

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)

InformationsquelleAutor Vebjorn Ljosa

J'ai posté une solution quand il ll afficher le nom d'utilisateur est en train de taper et de l'utilisateur arrêté type

JS:

function typingAction(){
  $('#typing').text("user is typing....");
clearTimeout();
setTimeout(()=>{
  $('#typing').text(' user stopped typing.....'); //**can call your function here**
  },2000);
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>Chat | ChatApp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/styles.css">
</head>

<body >
   
<p id="typing"></p>
<input name="message" type="text" placeholder="Message" autofocus autocomplete="off" oninput="typingAction()" />
  


</body>

</html>

InformationsquelleAutor Biswadev

Vous devez vous connecter pour publier un commentaire.