資訊專欄INFORMATION COLUMN
摘要：函數(shù)防抖簡單實現(xiàn)模擬請求獲取函數(shù)的作用域和變量清除定時器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時間內(nèi)只執(zhí)行一次函數(shù)節(jié)流是間隔時間執(zhí)行，不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。
防抖（debounce）
名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。
使用場景：以百度輸入框例，比如你要查詢XXx，想實現(xiàn)輸完了XXx之后，再進行搜索請求，這樣可以有效減少請求次數(shù)，節(jié)約請求資源。
函數(shù)防抖簡單實現(xiàn)
節(jié)流（throttle）
名詞解釋：連續(xù)執(zhí)行函數(shù)，每隔一定時間執(zhí)行函數(shù)。規(guī)定一個單位時間，在這個單位時間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個單位時間內(nèi)某事件被觸發(fā)多次，只有一次能生效。
使用場景：鼠標(biāo)連續(xù)多次click事件，mousemove 事件，監(jiān)聽滾動事件，比如是否滑到底部自動加載更多等等...
函數(shù)節(jié)流簡單實現(xiàn)
function throttle(fn, delay) {
let lastTime;
let timer;
delay || (delay = 300); // 默認(rèn)間隔為300ms
return function(arguments) {
let context = this;
let args = arguments;
let nowTime = +new Date(); // 獲取系統(tǒng)當(dāng)前的時間
if (lastTime && nowTime < lastTime+ delay) { // 當(dāng)前距離上次執(zhí)行的時間小于設(shè)置的時間間隔
clearTimeout(timer); // 清除定時器
timer = setTimeout(function() { // delay時間后，執(zhí)行函數(shù)
lastTime= nowTime ;
fn.apply(context, args);
}, delay);
} else { // 當(dāng)前距離上次執(zhí)行的時間大于等于設(shè)置的時間，直接執(zhí)行函數(shù)
lastTime= nowTime ;
fn.apply(context, args);
}
};
}
區(qū)別:
可以用日常進入電梯來舉例，形象地描述節(jié)流和防抖的區(qū)別
函數(shù)防抖：如果A在10：00:00開門走入電梯內(nèi)（觸發(fā)事件），如果后續(xù)沒有人進入電梯，電梯將在5秒鐘之后10：00:05關(guān)門（執(zhí)行事件監(jiān)聽器）。這時如果B在10：00:04走入電梯內(nèi)，電梯會在10：00:09才關(guān)門。
函數(shù)節(jié)流 ：如果A在10：00:00開門走入電梯內(nèi)（觸發(fā)事件），如果后續(xù)沒有人進入電梯，電梯將在5秒鐘之后10：00:05關(guān)門（執(zhí)行事件監(jiān)聽器）。這時如果B在10：00:04走入電梯內(nèi)，電梯同樣是在10：00:05關(guān)門。這個時間從第一個人進入電梯開始計時，不管在5秒之內(nèi)進來多少人，電梯都會在10：00:05關(guān)門。如果一直沒有人進來，則電梯不運行。
總結(jié):根據(jù)實際業(yè)務(wù)場景，合理的利用debounce（防抖）和throttle（節(jié)流）可以優(yōu)化性能和提高用戶體驗。
效果：
函數(shù)防抖是某一段時間內(nèi)只執(zhí)行一次；
函數(shù)節(jié)流是間隔時間執(zhí)行，不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。
原理：
防抖是維護一個計時器，規(guī)定在delay時間后觸發(fā)函數(shù)，但是在delay時間內(nèi)再次觸發(fā)的話，都會清除當(dāng)前的 timer 重新計時。這樣一來，只有最后一次操作事件才被真正觸發(fā)。
節(jié)流是通過判斷是否到達一定時間來觸發(fā)函數(shù)，若沒到規(guī)定時間則使用計時器延后，而下一次事件則會重新設(shè)定計時器。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102055.html
摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數(shù)延遲秒后執(zhí)行，在此秒內(nèi)，然后函數(shù)再次被調(diào)用，則刪除上次的定時器，取消上次調(diào)用的隊列任務(wù)，重新設(shè)置定時器。 在實際開發(fā)中，函數(shù)一定是最實用最頻繁的一部分，無論是以函數(shù)為核心的函數(shù)式編程，還是更多人選擇的面向?qū)ο笫降木幊?，都會有函?shù)的身影，所以對函數(shù)進行深入的研究是非常有必要的。 函數(shù)節(jié)流 比較直白的說，函數(shù)節(jié)流就是強制規(guī)定一...
摘要：您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。一些文章中的與上面所談到的設(shè)置類似。防抖防抖技術(shù)允許我們捆綁多個連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應(yīng)用這個簡單的舉個 歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。 節(jié)流[throttle]與防抖[debounce]在前...
摘要：隆重請出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過時間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來實現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...
摘要：對象是無法通過這種方式深拷貝。這就是函數(shù)防抖和節(jié)流要做的事情。函數(shù)防抖當(dāng)觸發(fā)頻率過高時函數(shù)基本停止執(zhí)行而函數(shù)節(jié)流則是按照一定的頻率執(zhí)行事件。 對象的深淺拷貝 對象的深拷貝與淺拷貝的區(qū)別： 淺拷貝：僅僅復(fù)制對象的引用, 而不是對象本身。 深拷貝：把復(fù)制的對象所引用的全部對象都復(fù)制一遍 淺拷貝的實現(xiàn)： var obj = { age : 18, person : { ...
摘要：函數(shù)防抖就是讓某個函數(shù)在上一次執(zhí)行后，滿足等待某個時間內(nèi)不再觸發(fā)此函數(shù)后再執(zhí)行，而在這個等待時間內(nèi)再次觸發(fā)此函數(shù)，等待時間會重新計算。 underscore.js提供了很多很有用的函數(shù)，今天想說說其中的兩個。這兩個函數(shù)都用于限制函數(shù)的執(zhí)行。 debounce 在解釋這個函數(shù)前，我們先從一個例子看下這個函數(shù)的使用場景。假設(shè)我們網(wǎng)站有個搜索框，用戶輸入文本我們會自動聯(lián)想匹配出一些結(jié)果供...
閱讀 5128·2021-07-25 21:37
閱讀 708·2019-08-30 15:53
閱讀 3378·2019-08-29 18:47
閱讀 712·2019-08-29 15:39
閱讀 2162·2019-08-29 13:12
閱讀 1832·2019-08-29 12:43
閱讀 3022·2019-08-26 11:52
閱讀 1914·2019-08-26 10:15
