angular.js和vue.js中实现函数去抖示例(debounce)
程序员文章站
2022-07-05 20:16:25
问题描述
搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起http请求等。
学过电子电路的同学应该知道按键防抖。原理是一样的:就是说当调用动作n毫秒后,...
问题描述
搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起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)) }
大功告成!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: js实时监控文本框输入字数的实例代码