1.什么是函数节流
概念:函数节流(throttle)是指连续触发事件,但是在n秒中只执行一次.
2.什么时候会使用函数节流
前端开发过程中有一些事件onresize,scroll,mousemove 等等,在短时间内会被频繁触发。如果不做限制的话有可能一秒之内执行几十次、几百次,那不仅会浪费计算机资源,还会降低程序运行速度,严重的话甚至造成浏览器卡死、崩溃,这种问题显然是致命的。所以需要我们去减少不必要的执行次数。
3.代码实现
/**
* 节流
* @param {Function} fn
* @param {Number} delay 延迟时间
*/
function throttle (fn, delay) {
var t = null,
begin = new Date().getTime();
return function () {
var _self = this,
args = arguments,
cur = new Date().getTime();
clearTimeout(t);
// 时间间隔大于延迟时间则进入
if (cur - begin >= delay) {
fn.apply(_self, args);
begin = cur;
} else {
t = setTimeout(function () {
fn.apply(_self, args);
}, delay);
}
}
}