在js中如何实现函数去抖（详细教程）

问题描述

搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起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中全选实现数据的绑定及获取