vue中使用节流

1,531 阅读2分钟

前言

最近刚跳槽了,来到一家新的公司,第一天进来就开始撸代码了,一直比较忙也没有时间更新文章,今天周六本该休息,为什么又来到公司了呢?昨晚下班的时候遇到一个很恶心的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秒,只执行一次,如果再触发,时间重新计算,如果你感兴趣也可以自己去尝试一下,每次记录一点点分享一点点,如果你觉得这个节流很实用,那就给我一个小小的赞吧(^_^)!