防抖函數和節流函數(包含在Vue中的使用)

前言 :

防抖函數和節流函數是優化高頻率執行js代碼的一種手段,js中的一些事件,好比瀏覽器中的resize,scroll,鼠標事件mouseover,mousemove,input輸入框的keypress等事件在觸發時,會不斷的調用綁定在事件上的回調函數,極大的浪費資源,下降前端性能,爲了優化體驗,須要對這類事件進行調用的次數的限制,這裏就須要咱們的函數節流和函數防抖.

防抖和節流異同點

相同:在不影響客戶體驗的前提下,將頻繁的回調函數,進行次數縮減,避免大量計算致使的頁面卡頓

不一樣:防抖是將屢次執行變爲是最後一次執行,節流是將屢次執行變爲在規定時間內只執行一次

防抖函數

防抖概念:指觸發事件後在規定時間內回調函數只能執行一次，若是在規定時間內又觸發了該事件，則會從新開始算規定時間。(每次執行事件都會清除前一次的事件)

打個簡單的好比:

函數防抖就是法師發技能的時候要讀條，技能讀條沒完再按技能就會刷新技能,從新進行讀條。
複製代碼

也就是說,這個事件還未執行完,可是你再一次觸發了這個函數,這個就會事件抖動的效果,如何避免這個問題,就用到了防抖函數的思想,就是在每次事件開始前都須要清理一下以前的事件。

代碼以下:

var debounce=function(fn, wait){
	var timer = null;
    return function(){
        if(timer!== null)   clearTimeout(timeout);        
        timer= setTimeout(fn, wait);    
    }
};
function yourfunc(){
	console.log(Math.random())
};
window.addEventListener('scroll',debounce(yourfunc,1000));
複製代碼

節流函數

節流的概念:當持續觸發事件時，在規定時間段內只能調用一次回調函數。若是在規定時間內又觸發了該事件，則什麼也不作,也不會重置定時器.

<script>
var throttle = function(func, delay) {            
&emsp;&emsp;var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);          
        }            
    }      
}  
function yourfunc() {
&emsp;&emsp;console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(yourfunc, 1000));
</script>
複製代碼

上面這個方法的執行理念就是,當函數開始執行能夠設置一個標記變量,當函數徹底執行徹底,再把標記的變量設置爲原來的變量,每次執行的時候都須要判斷變量的值.

防抖函數和節流函數的比較

相同點：

均可以經過使用 setTimeout 實現。 目的都是，下降回調執行頻率。節省計算資源。

不一樣點：

• 1)函數防抖，在一段連續操做結束後，處理回調，利用clearTimeout 和 setTimeout實現。函數節流，在一段連續操做中，每一段時間只執行一次，頻率較高的事件中使用來提升性能。

• 2)函數防抖關注必定時間連續觸發的事件只在最後執行一次，而函數節流側重於一段時間內只執行一次。

防抖函數使用場景

連續的事件，只需觸發一次回調的場景有：

搜索框搜索輸入。只需用戶最後一次輸入完，再發送請求 手機號、郵箱驗證輸入檢測 窗口大小Resize。只需窗口調整完成後，計算窗口大小。防止重複渲染。

函數節流使用場景

間隔一段時間執行一次回調的場景有：

滾動加載，加載更多或滾到底部監聽

谷歌搜索框，搜索聯想功能

高頻點擊提交，表單重複提交

在Vue中的使用

Lodash是一個輕量級的JavaScript工具函數庫，它方便了平常開發中對數據的操做，提升了開發效率。

平常開發中，一般會對數據，特別是數組和對象進行各類讀寫等操做：好比去重，拷貝，合併，過濾，求交集，求和等等。

而在lodash中也有對函數節流和函數防抖的介紹

lodash中的函數節流

_.throttle(func, [wait=0], [options={}])

func (Function): 要節流的函數。

[wait=0] (number): 須要節流的毫秒數。

[options={}] (Object): 選項對象。

[options.leading=true] (boolean): 指定調用在節流開始前，默認true。

[options.trailing=true] (boolean): 指定調用在節流結束後，默認true

lodash中函數的防抖

_.debounce(func, [wait=0], [options={}])

func (Function): 要防抖動的函數。

[wait=0] (number): 須要延遲的毫秒數。

[options={}] (Object): 選項對象。

[options.leading=false] (boolean): 指定在延遲開始前調用，默認false。

[options.maxWait] (number): 設置 func 容許被延遲的最大值。

[options.trailing=true] (boolean): 指定在延遲結束後調用，默認true。

補充:用戶在頻繁操做事件的時候,除了能夠用到函數的防抖和節流以外還能夠用到其餘的方法
複製代碼

• 1)防止重複點擊能夠添加一個開關,讓這個開關默認是true,第一次點擊,將其變爲false,點擊事件的執行須要判斷這個開關是否爲true，爲true執行,false不執行

• 2)還有一個方法就是點擊後off（‘click’）解除綁定事件，而後設置定時器必定事件後從新on（‘click’，函數名）綁定事件。