Comment implémenter la fonction anti-rebond dans js (tutoriel détaillé)

Cet article présente principalement des exemples de fonctions anti-rebond (debounce) dans angulaire.js et vue.js. Maintenant, je le partage avec vous et vous donne une référence.

Description du problème

Dans la zone de saisie de recherche, ce n'est qu'une fois que l'utilisateur a arrêté de taper que les opérations suivantes, telles que le lancement d'une requête HTTP, etc., seront effectuées.

Les étudiants qui ont étudié les circuits électroniques devraient connaître l'anti-tremblement des boutons. Le principe est le même : lorsque l'action est appelée n millisecondes, l'action sera exécutée. Si l'action est à nouveau appelée dans ces n millisecondes, le temps d'exécution sera recalculé. Cet article explique comment obtenir un anti-secousse des entrées utilisateur dans angulaire.js et vue.js respectivement.

Solution dans angulaire.js

Écrivez la fonction anti-rebond en tant que service pour faciliter plusieurs appels :

.factory('debounce', ['$timeout','$q', function($timeout, $q) {
  // The service is actually this function, which we call with the func
  // that should be debounced and how long to wait in between calls
  return function debounce(func, wait, immediate) {
   var timeout;
   // Create a deferred object that will be resolved when we need to
   // actually call the func
   var deferred = $q.defer();
   return function() {
    var context = this, args = arguments;
    var later = function() {
     timeout = null;
     if(!immediate) {
      deferred.resolve(func.apply(context, args));
      deferred = $q.defer();
     }
    };
    var callNow = immediate && !timeout;
    if ( timeout ) {
     $timeout.cancel(timeout);
    }
    timeout = $timeout(later, wait);
    if (callNow) {
     deferred.resolve(func.apply(context,args));
     deferred = $q.defer();
    }
    return deferred.promise;
   };
  };
 }])

Appelez la méthode dans Inject anti-rebond dans le contrôleur/directive qui doit utiliser cette fonction, et injectez également $watch, puis :

$scope.$watch('searchText',debounce(function (newV, oldV) {
  console.log(newV, oldV);
  if (newV !== oldV) {
    $scope.getDatas(newV);
  }
}, 350));

Vous avez terminé !

Solution dans Vue.js

Enregistrez d'abord le rebond dans le fichier de fonction publique

export function debounce(func, delay) {
 let timer

 return function (...args) {
  if (timer) {
   clearTimeout(timer)
  }
  timer = setTimeout(() => {
   func.apply(this, args)
  }, delay)
 }
}

puis introduisez-le dans les composants qui doivent être utilisé anti-rebond, et appelez-le dans le cycle de vie créé :

created() {
 this.$watch('searchText', debounce((newSearchText) => {
  this.getDatas(newSearchText)
 }, 200))
}

Vous avez terminé !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Serveur de requêtes de builds express

Utilisez la fonction de découpage personnalisée js pour supprimer les espaces aux deux extrémités

Principe de fonctionnement de JavaScript

Sélection complète et sélection inverse dans vue

Explication détaillée de l'utilisation de jest pour tester React Native composants

Sélectionnez tout dans la vue pour lier et obtenir des données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!