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秒的时间,为了流畅运行, 继续阅读

你所不了解的setTimeout

看到了一篇不错的文章《你会用setTimeout吗 》,转载过来的,改了个名字,一下子感觉搞大上了,嘎嘎。

加了几个关于 setTimeout 和setInterval的小知识:

关于setInterval()和setTimeout()返回值

setInterval(),setTimeout() 会返回一个值,一般认为是ID,将这个ID值传递给clearInterval(),clearTimeout() 可以取消执行,例如:

var intervalTimer=setInterval(function(){
console.log(1)
},3000);
console.log(intervalTimer); //一般是一个数字,Number
button.onclick=function(){
clearInterval(intervalTimer);
};

关于setInterval()和setTimeout()中回调函数中的this

setInterval(),setTimeout() 方法是浏览器 window 对象提供,所以第一个参数函数中的this指向window对象,这跟变量的作用域有关:

var a=1;
var obj={
a:2,
b:function(){
setTimeout(function(){
console.log(this.a);//这里返回的是:1;
},2000);
}
};
obj.b();

当然你可以通过使用bind()方法来改变这个情况:

var a=1;
var obj={
a:2,
b:function(){
setTimeout(function(){
console.log(this.a);//这里返回的是:2;
}.bind(this),2000);//注意这行
}
};
obj.b();

关于bind()方法,你可以看这里:http://www.css88.com/archives/5611

关于setInterval()和setTimeout()的参数

大家都知道setInterval()和setTimeout()可以接收两个参数,第一个参数是需要回调的函数,必须传入的参数,第二个参数是时间间隔,毫秒数,可以省略,这个可以看文章的下面,

不传第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。

但是我要说的当然不是这个,我要说的是setInterval()和setTimeout()可以接收更多的参数,那么这些参数是干什么用的呢?从第三个参数开始,依次用来表示第一个参数(回调函数)传入的参数,例如:

setTimeout(function(a,b){
console.log(1+a+b);//这里打印的是:8
},1000,3,4);

当然一些古老的浏览器是不支持的。

关于clearInterval()和clearTimeout()

clearInterval()和clearTimeout()其实是通用的,就是说你可以用 clearInterval() 取消 setTimeout() 执行,clearTimeout()同样可以取消 setInterval() 执行。

var intervalTimer=setInterval(function(){
console.log(1)
},3000);
console.log(intervalTimer); 
button.onclick=function(){
clearTimeout(intervalTimer); //注意这里,不是clearInterval哦
};

继续阅读