首页 > 代码库 > 函数节流
函数节流
参考《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()的执行次数。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。