防抖
原理：在事件被觸發(fā)的n秒之后執(zhí)行回調(diào)瞧哟，若在n秒內(nèi)再次觸發(fā)則重新計算事件。
-
適用場景：
搜索框聯(lián)想場景：防止每次輸入發(fā)送請求枪向，只發(fā)送最后一次勤揩。
按鈕提交場景：按鈕重復點擊，只執(zhí)行最后一次提交
-
實現(xiàn)：
function debounce(fn, wait) { let timeout; return function () { const context = this; const args = arguments; clearTimeout(timeout); timeout = setTimeout(function () { fn.apply(context, args) }, wait) } }
節(jié)流
原理：在一段時間內(nèi)秘蛔，只觸發(fā)一次函數(shù)陨亡，若觸發(fā)多次則只有一次生效鳍鸵。
-
適用場景：
拖拽場景：固定時間內(nèi)只執(zhí)行一次史飞，防止超高頻次觸發(fā)位置變動
縮放場景：監(jiān)控瀏覽器resize
-
實現(xiàn)：當觸發(fā)事件的時候，我們設置一個定時器帅腌，再觸發(fā)事件的時候倦畅，如果定時器存在遮糖，就不執(zhí)行，直到定時器執(zhí)行叠赐，然后執(zhí)行函數(shù)欲账，清空定時器，這樣就可以設置下個定時器芭概。
function throttle(fn, wait){ let timeout; return function(){ const _this = this; const args = arguments; if(!timeout){ timeout = setTimeout(function(){ timeout = null; fn.apply(_this, args); }, wait) } } }
