angular.js和vue.js中实现函数去抖示例(debounce)

前端之家收集整理的这篇文章主要介绍了angular.js和vue.js中实现函数去抖示例(debounce)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题描述

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

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

angular.js中解决方

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

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

大功告成!

Vue.js中的解决方

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

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

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

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

大功告成!

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

猜你在找的Vue相关文章