防抖和節流

防抖：比如echarts圖表需要根據視窗的大小進行resize操作，但是瀏覽器的resize事件觸發太頻繁了，特別是在拖拉瀏覽器視窗的時候，就會導致echarts例項經常去調resize方法，但是實際上只需要在停止變化瀏覽器視窗大小之後再去執行resize方法就好了，那麼這個時候就需要用到防抖的技術了。

防抖函式有另乙個需要注意的地方，就是停止多久之後再執行的問題。

但是很少有人思考為什麼叫防抖，防抖是什麼意思，防止抖動？這麼理解完全沒有問題，並且還十分形象。

舉個生活中的例子，假設現實中雙開門（類似電梯門，全家超市裡的那種感應門）在開門之後立馬判斷有沒有人進/出，如果沒有那麼立即執行關門動作，這個時候如果一直有人進進出出，雙開門是不是就會出現關到一半的時候立即剎車，開始往兩邊開，等到再發現沒人經過，又開始關。。。如此迴圈往復，雙開門就開始在那瘋狂抽搐，直接抖起來了，所以現實中的雙開門肯定就不能做成實時檢測實時開關門，就要做「防抖」處理，等到沒人進出的時候，等待n秒之後，再開始執行關門操作，如果n秒內有人進出的話，從新開始計時，這樣是不是就比較合理了。

節流：比如滑動滾動條非同步渲染資料，假設一直監聽滾動條事件，滾動到底部就開始向伺服器請求資料，那豈不是要頻繁的傳送http請求，這對伺服器來講肯定是有壓力的，這個時候如果用防抖，就顯得不太合適，因為防抖必須等到使用者停下來滑動才能請求到一次資料，如果使用者死心眼一直不停，就一直發不了請求，使用者就一直看不到後面的資料，這個時候就得使用節流技術，當事件持續觸發，間隔一段時間後執行一次

那麼同樣的，思考一下為什麼叫節流？老祖宗有個成語叫開源節流，說的是要增加收入，節省開支，這裡不談開源，節流，節省開支？放在這裡是什麼意思呢？還是拿雙開門來舉例，上面說到假設現實中的雙開門在開門之後立馬判斷有沒有人經過門進/出，會出現瘋狂抖動的情況，這門頻繁的開關十分損耗門的使用壽命啊啊，並且老闆不希望門長時間的處於開著的狀態，門一直開著也會影響門的使用壽命（這裡是假設的情況，或者認為此時長期保持某種狀態不能接受，不能使用防抖），於是老闆有一天想了個辦法，門開了之後，下次關門之前等待n秒，有人經過不會重新計時，也就是開門之後等n秒直接關門，等有人來再開。這就叫節流，或者說節流是降低抖動頻次

總的來說，防抖策略會讓函式在一段時間內只執行一次，節流策略會讓函式在一段時間內執行多次

拿雙開門舉例可能有點牽強，舉例只是為了方便記憶和理解，可以看到防抖和節流的策略其實非常簡單，重點在於為這兩種策略挑選合適的使用場景，或者說根據實際場景來選擇合適的策略。

低配版：

function
debounce
(callback, wait
)}

function
throttle
(callback, wait
), wait)
canrun =
false}}
}

高配版

/**
* @param  func
* @param  wait
* @param  immediate
* @return 
*/function
debounce
(func, wait, immediate=
false
)else}}
return
function
(...args
)return result
}}

function
throttle
(func, wait, opts =)}
;return
function()
const remaining = wait -
(now - previous)
;    context =
this
;    args = arguments;
if(remaining <=
0|| remaining > wait)
}elseif(
!timeout &&
!opts.noend)
return result;};
};

高配版允許目標函式立即執行，通過引數immediate來進行控制

高配版考慮了目標函式有引數的情況

高配版在時間的控制上更為精準，將任務的執行時間也包含在內

>
>
@click
="handleclick"
>
防抖按鈕el-button
>
div>
template
>
>
import
from
'@/utils'
export
default},
methods:
,1000
,true)}
}script
>

防抖和節流

防抖和節流 什麼是防抖和節流

防抖和節流

防抖和節流

相關推薦

防抖和節流什麼是防抖和節流