angular.js和vue.js中实现函数去抖示例（debounce）
问题描述
搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起Http请求等。
学过电子电路的同学应该知道按键防抖。原理是一样的：就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。
angular.js中解决方案
把去抖函数写成一个service，方便多处调用：
.factory('debounce',['$timeout','$q',function($timeout,$q){
//Theserviceisactuallythisfunction,whichwecallwiththefunc
//thatshouldbedebouncedandhowlongtowaitinbetweencalls
returnfunctiondebounce(func,wait,immediate){
vartimeout;
//Createadeferredobjectthatwillberesolvedwhenweneedto
//actuallycallthefunc
vardeferred=$q.defer();
returnfunction(){
varcontext=this,args=arguments;
varlater=function(){
timeout=null;
if(!immediate){
deferred.resolve(func.apply(context,args));
deferred=$q.defer();
}
};
varcallNow=immediate&&!timeout;
if(timeout){
$timeout.cancel(timeout);
}
timeout=$timeout(later,wait);
if(callNow){
deferred.resolve(func.apply(context,args));
deferred=$q.defer();
}
returndeferred.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
exportfunctiondebounce(func,delay){
lettimer
returnfunction(...args){
if(timer){
clearTimeout(timer)
}
timer=setTimeout(()=>{
func.apply(this,args)
},delay)
}
}
然后在需要使用的组件中引入debounce，并且在created生命周期内调用：
created(){
this.$watch('searchText',debounce((newSearchText)=>{
this.getDatas(newSearchText)
},200))
}
大功告成！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。