Vue Vue lodash.debounce防抖函數的使用

Vue 中使用防抖函數

這篇文章也是銜接我以前文章，輸入內容延遲顯示。

通常防抖函數，通常都是本身寫，或者直接搜的相似這種

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}

Vue官網Demo

https://cn.vuejs.org/v2/guide...

我看到Vue官網 偵聽器 使用了lodash這個組件

created: function () { 
// _.debounce 是一個經過 Lodash 限制操做頻率的函數。 
// 在這個例子中，咱們但願限制訪問 yesno.wtf/api 的頻率 
// AJAX 請求直到用戶輸入完畢纔會發出。想要了解更多關於 
// _.debounce 函數 (及其近親 _.throttle) 的知識，
// 請參考：https://lodash.com/docs#debounce
this.debouncedGetAnswer = \_.debounce(this.getAnswer, 500)
}

我就在想既然，官網都不用本身手寫的，那我也用一下這個。

lodash.debounce

先看 https://lodash.com/docs#debounce 文檔

因爲我只用了防抖，因此我只安裝防抖函數

npm i --save lodash.debounce

使用

import debounce from 'lodash.debounce'

textChange: debounce(function() {
        //注意這裏若是使用箭頭函數的話， this爲 undefined https://github.com/vue-styleguidist/vue-docgen-api/issues/23
         // do sth
}, 300)

總結

已經有輪子的話，就不要本身造輪子，固然練習的時候能夠本身造。