案例背景
不管是resize事件，还是onmouseover事件或其他事件，都存在着恶意及误操作的情况，而这些操作的频繁执行对性能会有大量的消耗，在用户体验上也不怎么友好。在前端开发中，开发者通常会使用函数节流(throttle)的方式来避免这种情况。函数节流，也就是控制用户在触发两个事件之间的时间间隔，而不是在触发下一个时间后让事件立即执行。
节流原理
通过设置定时器setTimeout来控制两个事件执行的时间间隔。
实际案例-屏幕缩放
首先采用闭包（详细介绍）方式将函数封装起来。
function throttle(fn,delay){ //这里使用了闭包的形式对其进行了封装
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(fn,delay); // fn是要执行的事件，delay为事件执行时间间隔
}
}
然后就是相关事件的执行。
var demo = document.getElementById("demo");
var num = 0;
window.onresize = throttle(function () { // 调用已经封装好的throttle函数，并传递相关参数给fn和delay
demo.innerHTML = window.innerWidth || document.documentElement.clientWidth; // 这里采用兼容模式写法
num++;
console.log(num);
},300);
这样就可实现函数的节流。
未经允许不得转载，如若转载，请注明出处