函數節流:是確保函數特定的時間內至多執行一次。
如js滾動事件很是頻繁,稍微滾動一下就會觸發許屢次,若是頻繁觸發的滾動,每一次都去檢查是否到頁面底部了再次形成了浪費。因而設置一個開關,一次只能有一個觸發執行,並對執行設置計時一段時間再執行,執行完畢以後再解鎖。這就是函數節流。
實現思路:經過內部使用閉包來緩存上次觸發函數的時間戳,而後檢驗本次函數執行時的時間戳和上次緩存的時間戳之差是否小於傳入的時間值參數。緩存
const restrictFn = (fn, wait) => { let stime = 0, etime; let isPause = false;//是否節流的開關 function result() {//經過一個閉包來保持對每次函數執行的時間戳的引用 etime = Date.now(); if (etime - stime < wait && isPause === false) { return; } else { fn() } stime = etime; } result.flash = function () {//當即執行,跳過節流 fn() } result.pause = function () {//暫停節流 isPause = true; } result.resume = function () {//恢復節流 isPause = false; } return result; }
使用實例:閉包
function print() { console.log('print something') } let restrictedPrint = restrictFn(print,1000);