前言
最近刚跳槽了,来到一家新的公司,第一天进来就开始撸代码了,一直比较忙也没有时间更新文章,今天周六本该休息,为什么又来到公司了呢?昨晚下班的时候遇到一个很恶心的bug,由于昨晚走的早没有解决,今天的我是休息不好的,所以今天就来公司解决了这个该死的虫子。最近看到现在写的项目,类似于自己的一个后台管理系统,很多列表页面,列表页面有很多搜索,他们写的代码就是监听数据变化就请求接口,这样请求接口就太频繁了,感觉防抖和节流如果用上是对于项目非常有用的。不说了,撸代码。
什么是节流?
简单粗暴的讲更容易理解,就是在我不断地触发事件的时候别老是发请求,发一次就够了。(高频事件触发,一定时间内只要执行一次,节流可以减少不断执行频率。)
搭建项目
先用脚手架搭建一个vue的项目,这个傻瓜式搭建我就不说了,看着文档一步一步搭建就好了,我这里搭建的是3.0的脚手架,用了ElementUI库。看一下目录结构
代码展示
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
search: {
input: '',
timer:null
}
}
},
watch: {
'search.input': {
handler (value) {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.getList();
}, 1000)
},
deep: true
}
},
methods: {
getList(){
//在这里你可以请求你的接口,拿到你想要的数据
console.log(1)
}
}
}
</script>
页面展示
初始化页面
当我输入15个字母后,如果不做节流那么控制台会打印15个1,也就是会请求15次接口,做了就留以后看一下页面,只打印1个1,大大优化了页面减少了请求次数。
总结
在网上看到好多封装了防抖和节流的方法,但只觉得不太好用,lodash里面貌似也提供了专门的方法,我也简单的看了一下,这里我没有写防抖的例子,放抖:反复触发事件N秒,只执行一次,如果再触发,时间重新计算,如果你感兴趣也可以自己去尝试一下,每次记录一点点分享一点点,如果你觉得这个节流很实用,那就给我一个小小的赞吧(^_^)!