JavaScript节流函数, 防止大量函数触发解决办法

理由

有时候开发者会需要注册一些回调函数在浏览器的scroll和resize事件上, 但是scroll和resize这类事件触发非常频繁, 而实际用户并不需要感知这么多的事件产生, 造成大量函数触发, 而如果这些函数和动画有关, 会给浏览器造成巨大压力, 节流函数可以很好的解决这个问题.

节流函数原理是设置一个阈值, 在一定时间内的触发但并不真实调用函数, 从而做到性能的优化, 实现的方式有反跳和节流. 反跳是调用动作n毫秒内, 才会执行该动作, 若在n毫秒内又调用此动作将重新计算时间. 节流则是先设置一个执行周期, 当调用的时刻大于等于执行周期时则执行并进入下一个周期, 下面是一个反跳函数的例子.

代码

1
2
3
4
5
6
7
8
9
10
11
function debounce(idle, func) {//接收两个参数, 间隔时间和实际调用函数
let last;//保存异步调用实际函数, 通过闭包赋值不被销毁
return function () {
let ctx = this,//存放函数this, 和变量给下面函数使用
args = arguments;
clearInterval(last);//如果该函数被调用, 则清除上一个异步调用的实际函数
last = setTimeout(function () {//重设异步调用实际函数
func.apply(ctx, args);//让实际函数在间隔设置的时间后调用
}, idle)
}
}
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!