函数节流的目的,是为了防止在不间断的时间里,重复执行某个函数。
比如浏览器的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 })