JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释
2014-11-15 10:37
519 查看
引子:昨天面试时面试官问了如何实现一个固定导航栏,在我答完后面试官问我可能存在哪些问题,如何优化?
这个问题我答得不太好,但现在回想起来应该有两个问题:
1. 把 fixbar元素 position:fixed 之后,它将脱离文档流,后面的元素将会跟上,这可能会形成一个闪烁,解决方法是跟随的元素设置 margin-top 为 fixbar 元素的高度,或者替换上一个等高的元素,这点面试时候没有描述出来。
2. 就是这篇博文主要内容 ”函数节流“,英文名 throttle 函数,在一些库,如underscore中有其实现,
主要思想是:对于非常频烦发射的事件,可以设置一定时间的”缓冲“,在这一定的时间内只执行最后一次时间的响应函数。
例如对于 窗口的滚动条拖动,onscroll时间是非常频繁发射的,如果每次发射都执行事件处理函数,那么将会增加浏览器负担,这时如果200ms(只是举例)执行一次,那么性能上将有所改善,效果上也能接受,当然实际应用需要二者找到一个平衡。
JQuery作者 John Resig 在2011年的一篇博文中提出了这个问题的最佳实践方法,请点击原文查看。代码如下:
通俗地大家把它称为 函数节流/事件稀释, 在 underscore 中,也有这个实现:
throttle
Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every waitmilliseconds.
Useful for rate-limiting events that occur faster than you can keep up with.
By default, throttle will execute the fu
4000
nction as soon as you call it for the first time, and, if you call it again any number of times during the wait period,
as soon as that period is over. If you'd like to disable the leading-edge call, pass {leading: false}, and if you'd like to disable the execution on the trailing-edge, pass
{trailing: false}.
以下是具体的实现代码:
这个问题我答得不太好,但现在回想起来应该有两个问题:
1. 把 fixbar元素 position:fixed 之后,它将脱离文档流,后面的元素将会跟上,这可能会形成一个闪烁,解决方法是跟随的元素设置 margin-top 为 fixbar 元素的高度,或者替换上一个等高的元素,这点面试时候没有描述出来。
2. 就是这篇博文主要内容 ”函数节流“,英文名 throttle 函数,在一些库,如underscore中有其实现,
主要思想是:对于非常频烦发射的事件,可以设置一定时间的”缓冲“,在这一定的时间内只执行最后一次时间的响应函数。
例如对于 窗口的滚动条拖动,onscroll时间是非常频繁发射的,如果每次发射都执行事件处理函数,那么将会增加浏览器负担,这时如果200ms(只是举例)执行一次,那么性能上将有所改善,效果上也能接受,当然实际应用需要二者找到一个平衡。
JQuery作者 John Resig 在2011年的一篇博文中提出了这个问题的最佳实践方法,请点击原文查看。代码如下:
var outerPane = $details.find(".details-pane-outer"), didScroll = false; $(window).scroll(function() { didScroll = true; }); setInterval(function() { if ( didScroll ) { didScroll = false; // Check your page position and then // Load in more results } }, 250);
通俗地大家把它称为 函数节流/事件稀释, 在 underscore 中,也有这个实现:
throttle
_.throttle(function, wait, [options])
Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every waitmilliseconds.
Useful for rate-limiting events that occur faster than you can keep up with.
By default, throttle will execute the fu
4000
nction as soon as you call it for the first time, and, if you call it again any number of times during the wait period,
as soon as that period is over. If you'd like to disable the leading-edge call, pass {leading: false}, and if you'd like to disable the execution on the trailing-edge, pass
{trailing: false}.
var throttled = _.throttle(updatePosition, 100); $(window).scroll(throttled);
以下是具体的实现代码:
_.throttle = function(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : _.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = _.now(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { clearTimeout(timeout); timeout = null; previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; };
相关文章推荐
- JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释
- JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释
- 【javascript】滚动条事件优化->函数节流与去抖
- 【javascript】滚动条事件优化->函数节流与去抖
- 【原创翻译】深入理解javascript事件处理函数绑定三部曲(二)——传统处理函数绑定模型
- JavaScript性能优化技巧之函数节流
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
- 【原创翻译】深入理解javascript事件处理函数绑定三部曲(三)——高级事件函数绑定模型
- Javascript为元素添加事件处理函数
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
- javascript日期处理函数,性能优化批处理
- JavaScript移除绑定在元素上的匿名事件处理函数
- 深入理解javascript事件处理函数绑定三部曲(二)——传统处理函数绑定模型
- JavaScript性能优化技巧之函数节流
- js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)
- JavaScript 性能优化技巧:函数节流
- JavaScript中的函数与事件处理
- 轻松学习JavaScript二十八:DOM编程学习之事件处理函数
- JavaScript性能优化技巧之函数节流
- (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)