哎呀吆博客

大前端爱好与探索者-Jerry

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

JavaScript 0 评

案例背景

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

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

上一篇

发表评论

电子邮件地址不会被公开。 必填项已用*标注