实例解析防抖动(Debouncing)和节流阀(Throttling)

有兴趣可以先看看这3篇系列文章:

防抖(Debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似而又不同。

当我们给 DOM 绑定事件的时候,加了防抖和节流的函数变得特别有用。为什么呢?因为我们在事件和函数执行之间加了一个控制层。记住,我们是无法控制 DOM 事件触发频率的。
继续阅读

JavaScript中的定时控制-requestAnimationFrame应用

javascript2

这篇文章很短。

在前一篇文章中,我们讨论了在另一篇文章中讨论的几个技术的API实现。

在这篇文章中,我们将看看requestAnimationFrame

当我们有一些重绘任务的时候,我们使用requestAnimationFrame – 这将改变屏幕上的内容。但这只是工作的一般方式。

function render() {
// do something
window.requestAnimationFrame(render);
}
window.requestAnimationFrame(render);

HighResTimeStamp

requestAnimationFrame的问题是它不强制一个回调速度 – 只定义了它的上限。正如MDN所说:>回调的数量通常是每秒60次,根据W3C的建议,通常会匹配在大多数浏览器的显示刷新率。 继续阅读

JavaScript中的定时控制-Throttle、Debounce、Immediate的API实现

javascript1

上一篇文章中,我们研究了一些技术用来函数的定时控制(回调),在特定事件发生时触发。这些技术是:

  • Throttle
  • Debounce
  • Immediate

在这篇文章中,我们将看到这些技术如何以高阶函数的形式实现通用的API。

我们首先看看 Debounce 的实现: 继续阅读

JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念

javascript

你可能知道,JavaScript遵循事件驱动的编程范例。这意味着一些行为可以激活一些响应,并且这些响应仅在发生特定的行为时才被激活。我们称这些行为events(事件),和响应callbacks(回调)。连续的事件流被称为event stream(事件流)。

这些行为发生的速度不是我们能手动控制的。但是我们可以控制何时和如何激活正确的响应。有一些技术为我们提供精确的控制。

  • Throttle
  • Debounce
  • Immediate

Throttle

在现代浏览器中,帧速率为60fps是流畅性能的目标,给定我们16.7ms的时间预算用于响应一些事件所有需要的更新。这样可以推断,如果每秒发生n个事件并且回调执行,需要t秒的时间,为了流畅运行, 继续阅读

javascript函数的throttle和debounce

上周写了window resize和scroll事件的基本优化,结果微博上交流的人还挺多,大家都提到了一个技术名词:“throttle”。

throttle

我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:

  • 鼠标移动,mousemove 事件
  • DOM 元素动态定位,window对象的resize和scroll 事件

有人形象的把上面说的事件形象的比喻成机关枪的扫射,throttle就是机关枪的扳机,你不放扳机,它就一直扫射。我们开发时用的上面这些事件也是一样,你不松开鼠标,它的事件就一直触发。回到window resize和scroll事件的基本优化提到的优化:

var resizeTimer=null;
$(window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log("window resize");
},400);
}
);

setTimeout和clearTimeout其实就是一个简单的 throttle,很多好的控制了resize事件的调用频度。

debounce

debounce和throttle很像,debounce是空闲时间必须大于或等于 一定值的时候,才会执行调用方法。debounce是空闲时间的间隔控制。比如我们做autocomplete,这时需要我们很好的控制输入文字时调用方法时间间隔。一般时第一个输入的字符马上开始调用,根据一定的时间间隔重复调用执行的方法。对于变态的输入,比如按住某一个建不放的时候特别有用。 继续阅读