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