问题描述
搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起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))}大功告成！
引用
1. https://stackoverflow.com/questions/29771011/angularjs-watch-with-debounce2. https://www.cnblogs.com/fsjohnhuang/p/4147810.html原文地址：https://segmentfault.com/a/1190000012751237
angular.js和vue.js中实现函数去抖（debounce）
原文地址：https://www.cnblogs.com/lalalagq/p/9959876.html