前端性能优化：高频执行事件/方法的防抖

为什么我们要引入防抖？？？

开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。

 

防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例：

// 取自 UnderscoreJS 实用框架

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);

    };

  }

 

// 添加resize的回调函数，但是只允许它每300毫秒执行一次

window.addEventListener('resize', debounce(function(event) {

 

    // 这里写resize过程

 

}, 300));

 

debounce方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！