函数节流（throttle）

Posted 2020-10-08

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

比如浏览器的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 })