vue中使用節流

前言

最近剛跳槽了，來到一家新的公司，第一天進來就開始擼代碼了，一直比較忙也沒有時間更新文章，今天週六本該休息，爲何又來到公司了呢？昨晚下班的時候遇到一個很噁心的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秒，只執行一次，若是再觸發，時間從新計算，若是你感興趣也能夠本身去嘗試一下，每次記錄一點點分享一點點，若是你以爲這個節流很實用，那就給我一個小小的贊吧(^_^)!