Implémentation de la fonction anti-rebond dans angulaire.js et vue.js

Cet article présente principalement la fonction d'implémentation de angularjs et fournit un problème et une solution concernant Angularjs. Examinons maintenant cet article ensemble

<.>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 ultérieures, 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. (Si vous voulez en savoir plus, rendez-vous sur le site PHP chinois

Manuel de développement AngularJS pour apprendre)

Solution dans angulaire.js

Écrivez la fonction anti-rebond en tant que service , ce qui est plus pratique Appelez à :

.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, injectez l'anti-rebond dans le contrôleur/la 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 l'anti-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)
  }
}

Introduisez ensuite l'anti-rebond dans le composant qui doit être utilisé et dans le fichier créé Appel de vie dans le cycle :

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

Vous avez terminé !

Citation

1. https://stackoverflow.com/questions/29771011/angularjs-watch-with-debounce
2. https://www.cnblogs.com/fsjohnhuang/p/4147810.html

D'accord, cet article est terminé (si vous voulez en voir plus, rendez-vous sur le site PHP chinois

Manuel d'utilisation AngularJS pour apprendre), Si vous avez des questions, vous pouvez laisser un message ci-dessous.

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!