angular.js和vue.js中实现函数去抖示例（debounce）

发布时间：2020-12-17 02:37:57 所属栏目：百科来源：网络整理

导读：问题描述搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起Http请求等。学过电子电路的同学应该知道按键防抖。原理是一样的：就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在ang

搜索输入框中，只当用户停止输入后，才进行后续的操作，比如发起Http请求等。

学过电子电路的同学应该知道按键防抖。原理是一样的：就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。

把去抖函数写成一个service，方便多处调用：

调用方法，在需要使用该功能的controller/directive中注入debounce，也要注入$watch,然后：

大功告成！

首先在公共函数文件中注册debounce

return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this,args)
},delay)
}
}

然后在需要使用的组件中引入debounce，并且在created生命周期内调用：

{ this.getDatas(newSearchText) },200)) }

大功告成！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!