在js中如何實作函數去抖（詳細教學）

這篇文章主要介紹了angular.js和vue.js中實現函數去抖範例（debounce）,現在分享給大家，也給大家做個參考。

問題描述

搜尋輸入框中，只當使用者停止輸入後，才進行後續的操作，例如發起Http請求等。

學過電子電路的同學應該知道按鍵防手震。原理是一樣的：就是說當呼叫動作n毫秒後，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。本文將分別探討在angular.js和vue.js中如何實現對使用者輸入的防手震。

angular.js中解決方案

把去抖函數寫成一個service，方便多處呼叫：

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

呼叫方法，在需要使用該功能的controller/directive中註入debounce，也要注入$watch,然後：

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

大功告成！

Vue.js中的解決方案

首先在公用函數檔案中註冊debounce

export function debounce(func, delay) {
 let timer

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

然後在需要使用的元件中引入debounce，並且在created生命週期內呼叫：

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

大功告成！

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

express建置查詢伺服器

#使用js自訂trim函數刪除兩端空格

JavaScript運作原理

vue中全選與反選

詳解講解使用jest測試react native元件

在vue中全選實作資料的綁定及取得

以上是在js中如何實作函數去抖（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！