Web前端性能优化——高频触发事件的防抖

最新推荐文章于 2025-06-01 17:56:46 发布

转载最新推荐文章于 2025-06-01 17:56:46 发布 · 167 阅读

文章标签：

#前端 #ViewUI

本文介绍了JavaScript中防抖技术的应用，旨在解决事件处理函数频繁触发导致的性能问题。通过使用防抖函数，可以限制事件在特定时间内的触发频率，有效提升用户体验。

JS 提供了行为层的支持，为用户提供了交互的操作性。

然而，部分事件却常常有意无意的被频繁触发。比方浏览器窗体的 resize 事件。某个元素的 mouseover 事件，假设处理触发事件的回调函数过重，那么最后的结果就是浏览器死掉。

为此，怎样提供一种对此类事件的高频触发的防抖是相当重要的。

所谓的防抖，就是在一定时间内。规定事件被触发的最多次数。

參考：http://www.gbtags.com/gb/share/1217.htm

给出以下的防抖程序

function debounce(func, wait, immediate){
    var timeout;
    return function(){
        var context = this,
              args = arguments;
        var later = function(){
            timeout = null;
            if(!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if(callNow) func.apply(context, args);
    };
}

若加入 mouseover 事件，并规定仅仅执行它每300毫秒执行一次。则

var link = document.getElementById("links");

link.addEventListener("mouseover", debounce(function(){
	//加入回调处理函数的函数体
},300,true), false);

可是。经測试发现，若把时间设置大些，比方5秒。那么每次moueover 事件的发生都会刷新计时器。也就是说假设用户一直在mouseover。则这个处理事件永远不会发生。

为此。我们能够加多一个条件：

function debounce(func, wait, immediate){
    var timeout;
    return function(){
        var context = this,
              args = arguments;
        var later = function(){
            timeout = null;
            if(!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        if(!timeout){
	    clearTimeout(timeout);
	    timeout = setTimeout(later, wait);
	}
        if(callNow) func.apply(context, args);
    };
}

这样一来实现的效果就是。当用户的 mouseover 触发了事件发生，就会触发计时器的计时，过程中其它的 mouseover 事件不会触发事件发生。也不会触发计时器的重置，效果才是真正的在规定时间内仅仅同意事件被触发一次。