So implementieren Sie die Funktionsentprellung in js (ausführliches Tutorial)

In diesem Artikel werden hauptsächlich Beispiele für das Entprellen von Funktionen in angle.js und vue.js vorgestellt. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

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.

Lösung in angle.js

Schreiben Sie die Entprellungsfunktion als Dienst, um mehrere Aufrufe zu ermöglichen:

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

Methode aufrufen, bei Bedarf verwenden Injizieren Entprellen Sie in den Controller/die Direktive dieser Funktion und fügen Sie auch $watch ein, und dann:

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

Sie sind 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)
 }
}

und führen Sie dann die Entprellung in den Komponenten ein, die verwendet werden müssen , Und rufen Sie innerhalb des erstellten Lebenszyklus auf:

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

Du bist fertig!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Express erstellt Abfrageserver

Verwenden Sie die benutzerdefinierte Trim-Funktion von js, um Leerzeichen an beiden Enden zu entfernen

JavaScript-Funktionsprinzip

Alles auswählen und Auswahl in Vue umkehren

Detaillierte Erklärung der Verwendung von Jest zum Testen von nativem React Komponenten

Alle in Vue auswählen, um Daten zu binden und zu erhalten

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktionsentprellung in js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!