angular.js和vue.js中实现函数去抖(debounce)
发布时间:2020-12-17 08:29:54 所属栏目:安全 来源:网络整理
导读:问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等。 学过电子电路的同学应该知道按键防抖。原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在ang
问题描述搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起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-debounce 2. https://www.cnblogs.com/fsjohnhuang/p/4147810.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |