函数节流

：点上面关注免费学习前端知识！

---

浏览器中某些计算和处理要比其他的昂贵很多。例如，DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在IE中使用 onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在 onresize 事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会让浏览器崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流。

函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。以下是该模式的基本形式：

var processor = {

    timeoutId: null,

    //实际进行处理的方法    

    performProcessing: function(){

    //实际执行的代码

    },

    //初始处理调用的方法

    process: function(){

        clearTimeout(this.timeoutId);

        var that = this;

        this.timeoutId = setTimeout(function(){

            that.performProcessing();

        }, 100);

    }

};

//尝试开始执行

processor.process();

在这段代码中，创建了一个叫做 processor 对象。还有2个方法： process()和 performProcessing() 。前者是初始化任何处理所必须调用的，后者则实际进行应完成的处理。当调用了 process() ，第一步是清除存好的 timeoutId ，来阻止之前的调用被执行。然后，创建一个新的定时器调用 performProcessing() 。由于setTimeout() 中用到的函数的环境总是 window ，所以有必要保存this的引用以方便以后使用。

时间间隔设为了100ms，所以如果100ms之内调用了 process() 共20次， performanceProcessing() 仍只会被调用一次。

长按二维码

关注我们