資訊專欄INFORMATION COLUMN
摘要：應用場景給按鈕加函數(shù)防抖防止表單多次提交。對于輸入框連續(xù)輸入進行驗證時，用函數(shù)防抖能有效減少請求次數(shù)。參考十分鐘學會防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖
函數(shù)防抖和節(jié)流 防抖
對于觸發(fā)非常頻繁又沒有必要每次都執(zhí)行的事件，希望合并到一次去執(zhí)行；
實現(xiàn)思路：
事件觸發(fā)后，在規(guī)定的時間范圍內(nèi)如果事件重復觸發(fā)，那么忽略之前觸發(fā)的事件，并且重新開始計時，直到某一次事件觸發(fā)后大于規(guī)定時間，我們才執(zhí)行需要執(zhí)行的代碼段（函數(shù)）；
看起來就像是只執(zhí)行了用戶快速操作的最后一次事件；
代碼實現(xiàn)：
var debounce = function(fn, delayTime) {
var timeId;
return function() {
var context = this, args = arguments;
timeId && clearTimeout(timeout);
timeId = setTimeout(function{
fn.apply(context, args);
}, delayTime)
}
}
簡單分析：
利用閉包保存一個setTimeout的id，如果在delayTime內(nèi)閉包中的函數(shù)再次執(zhí)行，會立刻clear掉上一次的延時回調(diào)，生成一個新的延時回調(diào)；如果超過delayTime沒有再次執(zhí)行閉包中的函數(shù)，那延時回調(diào)就會被執(zhí)行，這樣才算是真正執(zhí)行了需要執(zhí)行的事件。
應用場景：
給按鈕加函數(shù)防抖防止表單多次提交。
對于輸入框連續(xù)輸入進行AJAX驗證時，用函數(shù)防抖能有效減少請求次數(shù)。
判斷scroll是否滑到底部，滾動事件+函數(shù)防抖
節(jié)流對于觸發(fā)非常頻繁的事件，在規(guī)定時間間隔后才能執(zhí)行，在規(guī)定時間間隔內(nèi)觸發(fā)的事件會被忽略，但是不會重新開始計時；
實現(xiàn)思路：
規(guī)定一個時間，一次觸發(fā)后，在規(guī)定時間內(nèi)觸發(fā)的事件都忽略，超過規(guī)定時間后可以重新執(zhí)行觸發(fā)的事件；
代碼實現(xiàn)：（兩種）
時間戳
var throttle = (fn, delayTime) => {
var _start = Date.now();
return function() {
var _now = Date.now(), context = this, args = arguments;
if(_now - _start >= delayTime) {
fn.apply(context, args);
_start = Date.now();
}
}
}
簡單分析：
先設定一個初始時間，然后每次執(zhí)行閉包內(nèi)的函數(shù)都與當前時間做比較，如果小于delayTime，什么也不做，忽略該次事件，如果大于delayTime，執(zhí)行回調(diào)函數(shù)fn，重置初始時間；
定時器
var throttle = function(fn, delayTime) {
var flag;
return function() {
var context = this, args = arguments;
if(!flag) {
fn.apply(context, args);
flag = setTimeout(function() {
flag = false;
}, delayTime);
}
}
}
簡單分析：
通過設定一個標志位，通過標志位判斷是否可以執(zhí)行回調(diào)函數(shù)，在延時函數(shù)中執(zhí)行回調(diào)的同時將標志位置為可再次執(zhí)行，這樣就保證了在規(guī)定時間之后能再次執(zhí)行需要的回調(diào)函數(shù)；
應用場景：
游戲中的刷新率
DOM元素拖拽
Canvas畫筆功能
防抖和節(jié)流區(qū)別防抖是把之前頻繁的事件觸發(fā)都放到某一次停頓時觸發(fā)，可以理解為執(zhí)行最后一次（并不準確）；節(jié)流則是執(zhí)行完一次以后等待一段時間之后才能再次執(zhí)行，可以理解為第一次；這意味著防抖執(zhí)行的是最新的，而節(jié)流在等待中如果事件有更新是不會執(zhí)行的，會被忽略，這兩者應用場景不同；
防抖適合多次事件一次響應的情況；
節(jié)流適合大量事件按時間做平均分配觸發(fā)。
參考：
十分鐘學會防抖和節(jié)流
輕松理解JS函數(shù)節(jié)流和函數(shù)防抖
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103373.html
摘要：本文會分別介紹什么是防抖和節(jié)流，它們的應用場景，和實現(xiàn)方式。防抖和節(jié)流都是為了解決短時間內(nèi)大量觸發(fā)某函數(shù)而導致的性能問題，比如觸發(fā)頻率過高導致的響應速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。 本文由小芭樂發(fā)表 0. 引入 首先舉一個例子： 模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼： 沒有防抖 ...
摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結束后，處理回調(diào)，利用和實現(xiàn)。函數(shù)防抖關注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(nèi)只執(zhí)行一次。 原博客地址，歡迎star 函數(shù)防抖和節(jié)流 函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...
摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務頻繁觸發(fā)的情況下，只有任務觸發(fā)的間隔超過指定間隔的時候，任務才會執(zhí)行。節(jié)流指定時間間隔內(nèi)只會執(zhí)行一次任務一定時間內(nèi)方法只跑一次。 概念 函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。 防抖：任務頻繁觸發(fā)的情況下，只有任務觸發(fā)的間隔超過指定間隔的時候，任務才會執(zhí)行。 節(jié)流：指定時間間隔內(nèi)只會執(zhí)行一次任...
摘要：函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。封裝一個函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽是我們封裝的這個函數(shù)，將目標函數(shù)作為回調(diào)傳進去，等待一段時間過后執(zhí)行目標函數(shù)第二點實現(xiàn)了，再看第一點持續(xù)觸發(fā)不執(zhí)行。 曾經(jīng)面試時候被問到過這個，年少的我一臉無知。。。 后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發(fā)現(xiàn)之前的代碼竟然都沒做限制，輸入一次發(fā)一次請求。簡直忍不了，就在項目的u...
摘要：定時器實現(xiàn)當觸發(fā)事件的時候，我們設置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行直到秒后，定時器執(zhí)行執(zhí)行函數(shù)，清空定時器，這樣就可以設置下個定時器。當最后一次停止觸發(fā)后，由于定時器的延遲，可能還會執(zhí)行一次函數(shù)。 一、什么是防抖和節(jié)流 Ps: 比如搜索框，用戶在輸入的時候使用change事件去調(diào)用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務器資源，即使你的服務器資源...
閱讀 1109·2021-10-14 09:43
閱讀 1159·2021-10-11 11:07
閱讀 3118·2021-08-18 10:23
閱讀 1495·2019-08-29 16:18
閱讀 1010·2019-08-28 18:21
閱讀 1480·2019-08-26 12:12
閱讀 3767·2019-08-26 10:11
閱讀 2508·2019-08-23 18:04
