函数节流(throttle)

函数节流的目的,是为了防止在不间断的时间里,重复执行某个函数。

比如浏览器的onresize事件,如果我们在这个函数中操作了DOM元素,那么对CPU的开销是非常大的。

所以为了防止这种情况的出现,函数节流起到了很好的作用。

 1 /**
 2  * 函数节流方法
 3  * @param delay 延迟delay毫秒后,执行fn函数
 4  * @param fn 需要执行的函数
 5  * @param context 上下文
 6  */
 7 var throttle = function (delay, fn, context) {
 8   window.clearTimeout(fn.tId)
 9 
10   fn.tId = window.setTimeout(function () {
11     fn.call(context)
12   }, delay)
13 }
14 
15 // 注意:需要节流的函数必须是具名函数,否则tId无效
16 var resizeEvent = function () {
17   console.log((new Date).toLocaleString())
18 }
19 
20 // resize函数每秒会触发20多次。使用throttle函数后,只会在最后一次的rezise触发后,间隔500毫秒后才真正触发要执行的resizeEvent函数
21 window.addEventListener('resize', function () {
22   throttle(500, resizeEvent, resizeEvent)
23 })
原文地址:https://www.cnblogs.com/ch11ry/p/7589342.html