函数节流:是确保函数特定的时间内至多执行一次。
如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);