引用网上摘抄的一段对函数节流比较通俗的解释。
函数节流背后的基本思想是:某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码,当第二次调用函数时,它会清除前一次的定时器并设置另一个。如果前一次的定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换成一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
函数定义:
var throttle = function (fn, delay) { var startTime = new Date(); var timer = null; return function () { var args = arguments; var nowTime = new Date() if (nowTime - startTime >= delay ) { // 不使用清除定时器实现不重复调用是因为这样会导致每次都会执行清除和设置定时器操作,影响性能。 // clearTimeout(timer); timer = setTimeout(function() { return fn.apply(this, args); }, delay); startTime = nowTime; // 直接设置时间相当,不进到if判断里面即可实现不重复调用。 } } }
使用方法:
var d = throttle(function(e){ console.log(e); }, 500); document.addEventListener('scroll', d);