定时器闭包版实现函数节流-窗口缩放

案例背景

不管是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);

这样就可实现函数的节流。

未经允许不得转载，如若转载，请注明出处