Javascript Girl
  1. Javascript Girl
  3. Puis-je mettre une minuterie sur un .on ('keyup' pour réduire le nombre de mises à jour?
Intereting Posts
Comment convertir de manière fiable XML en String dans IE 10/11? Obtenir de la valeur de css en utilisant document.getElementById (). Style.height javascript Dans l'événement mousedown, est-il possible d'annuler l'événement de clic résultant? Ou lui transmettre des informations? Invoke Backing bean méthode de JavaScript + JSF Les appels d'événement Throttle dans jQuery Quelle est la meilleure pratique pour passer des variables d'une page HTML à l'autre? Grouping Legends in Highcharts Affichage de la popup dans le nouveau SDK JavaScript de Facebook Nouvelle requête FQL dans l'API Graph API Exemple de Javascript? Comment indexer par plusieurs éléments d'une matrice ou d'un objet en utilisant JavaScript / jQuery? Backbone.js chercher des paramètres Déclaration d'expression logique Switch Case en Java – contre JS ou PHP Typeahead.js / Bloodhound affiche un seul résultat Comment envoyer un formulaire avec JavaScript en cliquant sur un lien? Comment transmettre les paramètres directeurs à la directive

Puis-je mettre une minuterie sur un .on ('keyup' pour réduire le nombre de mises à jour?

J'ai le code suivant: 

$wmdInput.on('keyup', function () { var rawContent = $wmdInput.val(); scope.$apply(function () { ngModel.$setViewValue(rawContent); }); });

Cependant, il semble ralentir mon entrée de personnages. Y at-il un moyen de mettre un délai sur cela afin que toutes les données soient enregistrées, mais ça ne le fait plus que par exemple une fois toutes les deux secondes?

Si vous pouvez utiliser lodash (ce que vous devriez), il suffit d'envelopper la fonction dans _.debounce : 

 $wmdInput.on('keyup', _.debounce(function () { var rawContent = $wmdInput.val(); scope.$apply(function () { ngModel.$setViewValue(rawContent); }); }, 300));

Cela entraînera que la fonction ne soit appelée que lorsque l'utilisateur a cessé de taper pendant 300 ms – évidemment, vous devriez régler l' wait de tout ce qui vous convient le mieux.

Les déboursements de l'OMI sont plus appropriés que l'étranglement dans ce cas.

Approche Pure AngularJS 

 var promise; $wmdInput.on('keyup', function () { $timeout.cancel(promise); promise = $timeout(function() { var rawContent = $wmdInput.val(); ngModel.$setViewValue(rawContent); }, 2000); });

Les extensions réactives pour JavaScript peuvent être une option à utiliser. Vous pouvez configurer l'événement de la souris comme source d'événement et accélérer les événements. En fait, README a un exemple qui ressemble à ce que vous voulez … 

 var $input = $('#input'), $results = $('#results'); /* Only get the value from each key up */ var keyups = Rx.Observable.fromEvent(input, 'keyup') .map(function (e) { return e.target.value; }) .filter(function (text) { return text.length > 2; }); /* Now throttle/debounce the input for 500ms */ var throttled = keyups .throttle(500 /* ms */); /* Now get only distinct values, so we eliminate the arrows and other control characters */ var distinct = throttled .distinctUntilChanged();

Dans votre cas, vous ne voulez peut-être pas le filter pour la length > 2 , alors supprimez simplement cette expression. Quoi qu'il en soit, vous pouvez simplement vous subscribe à la fin pour traiter votre événement 

 distinct.subscribe(function(value) { scope.$apply(function () { ngModel.$setViewValue(value); }); });

Et il y a des liens pour AngularJS pour vous aussi.

Dans la fonction ci-dessus, ajoutez deux lignes à:

  • Supprimez l'événement de la souris de wmdInput.
  • Réglez la minuterie pour ajouter un événement de touche à wmdInput après 2 secondes.