How to implement function debouncing in js (detailed tutorial)

This article mainly introduces examples of function debounce (debounce) in angular.js and vue.js. Now I will share it with you and give you a reference.

Problem description

In the search input box, only after the user stops typing, subsequent operations, such as initiating an HTTP request, etc. will be performed.

Students who have studied electronic circuits should know about button anti-shake. The principle is the same: that is, when the action is called n milliseconds, the action will be executed. If the action is called again within these n milliseconds, the execution time will be recalculated. This article will discuss how to achieve anti-shake of user input in angular.js and vue.js respectively.

Solution in angular.js

Write the debounce function as a service to facilitate multiple calls:

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

Call method, use it when needed Inject debounce into the controller/directive of this function, and also inject $watch, and then:

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

You're done!

Solution in Vue.js

First register debounce in the public function file

export function debounce(func, delay) {
 let timer

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

Then introduce debounce into the components that need to be used, And call within the created life cycle:

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

You’re done!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

express builds query server

Use js custom trim function to delete spaces at both ends

JavaScript operating principle

Select all and invert selection in vue

Detailed explanation of using jest to test react native components

Select all in vue to implement data binding and acquisition

The above is the detailed content of How to implement function debouncing in js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!