Implementierung der Funktion Debounce in angle.js und vue.js

Dieser Artikel stellt hauptsächlich die Implementierungsfunktion von AngularJS vor und bietet ein Problem und eine Lösung für AngularJS. Schauen wir uns nun gemeinsam diesen Artikel an

Problembeschreibung

Im Sucheingabefeld werden nachfolgende Vorgänge wie das Initiieren einer HTTP-Anfrage usw. erst ausgeführt, nachdem der Benutzer mit der Eingabe aufgehört hat.

Studenten, die elektronische Schaltkreise studiert haben, sollten über die Anti-Shake-Funktion von Tasten Bescheid wissen. Das Prinzip ist dasselbe: Das heißt, wenn die Aktion n Millisekunden aufgerufen wird, wird die Aktion ausgeführt. Wenn die Aktion innerhalb dieser n Millisekunden erneut aufgerufen wird, wird die Ausführungszeit neu berechnet. In diesem Artikel wird erläutert, wie in angle.js bzw. vue.js ein Anti-Shake der Benutzereingaben erreicht wird. (Wenn Sie mehr wissen möchten, besuchen Sie die chinesische PHP-Website AngularJS Development Manual, um mehr zu erfahren)

Lösung in angle.js

Schreiben Sie die Entprellungsfunktion als Dienst , was bequemer ist. Rufen Sie auf:

.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;
      };
    };
  }])

Rufen Sie die Methode auf, injizieren Sie Debounce in den Controller/die Direktive, der diese Funktion verwenden muss, und injizieren Sie auch $watch, und dann:

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

Sie' wieder fertig!

Lösung in Vue.js

Registrieren Sie zunächst die Entprellung in der öffentlichen Funktionsdatei.

export function debounce(func, delay) {
  let timer

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

Führen Sie dann die Entprellung in der Komponente ein, die verwendet werden muss, und innerhalb des erstellten Lebenszyklus Rufen Sie an:

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

Fertig!

Zitat

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

Okay, dieser Artikel ist vorbei (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AngularJS-Benutzerhandbuch, um mehr zu erfahren), es gibt Fragen Sie können unten eine Nachricht hinterlassen, um Fragen zu stellen.

Das obige ist der detaillierte Inhalt vonImplementierung der Funktion Debounce in angle.js und vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!