首页 > 代码库 > 函数节流

函数节流

参考《JavaScript高级程序设计》第三版 第22章 高级技巧

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

函数节流背后的基本思想是指, 某些代码不可以在没有间断的情况连续重复执行。 第一次调用函数,创建一个定时器, 在指定的时间间隔之后运行代码。 当第二次调用该函数时, 会清除前一次的定时器并设置另一个。 目的是只有在执行函数的请求停止了一段时间后才执行。

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
        method.call(context);
    }, method.interval || 200);
}

throttle函数接受两个参数, 要执行的函数及作用域, 如果没有第二个参数, 将会在全局作用域执行。

onresize举例:

function handleResize() { 
    // do someting
}
window.onresize = function() {
    handleResize.interval = 100;
    throttle(handleResize);
}

使用了throttle()函数后, 大大减少了handleResize()的执行次数。