setTimeout()
设定一个定时器,在指定时间后执行一段代码。
let timeoutId = setTimeout(func,delay,param1,param2,……);
- timeoutId:为此定时器的id,此id可以传入clearTimeout()来取消这次定时器
- func:为指定时间后执行的函数
- delay:是延迟的毫秒数。
如果省略的话,默认取值0。 - param:向延迟函数传递而外的参数,IE9以上支持
this问题
由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致,这些代码中包含的 this 关键字会指向 window (或全局)对象,这和所期望的this的值是不一样的.
解决方案:使用bind()来绑定当时所处环境的this
最小延迟
当设置的delay时间小于浏览器的最小延迟时间时,浏览器就会强制使用最小延迟时间。这个最小延迟时间一般为4ms。
setInterval()
以给定的时间间隔重复执行一个函数。
var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
这里的参数的含义与setTimeout相同。
可以使用setTimeout来完成setInterval的工作,这样做的好处是,setTimeout保证了每次执行完当前函数中的操作再进行下一次定时任务,而setInterval不会保证上一次任务执行完毕再添加下一次任务。
setImmediate()
该方法用来把一些需要长时间运行的操作放在一个回调函数里,在浏览器完成后面的其他语句后,就立刻执行这个回调函数。类似setTimeout(func, 0)
var immediateID = setImmediate(func, [param1, param2, ...]);
- immediateID 是这次setImmediate方法设置的唯一ID,可以作为 clearImmediate 的参数.
- func 是将要执行的回调函数
该方法可以用来替代 setTimeout(0) 方法来滞后完成一些需要占用大量cpu时间的操作.下面的JavaScript可以用来兼容那些不支持setImmediate方法的浏览器:
if (!window.setImmediate) {
window.setImmediate = function(func, args){
return window.setTimeout(func, 0, args);
};
window.clearImmediate = window.clearTimeout;
}
requestAnimationFrame
专门为实现高性能的帧动画而设计的API,但是不能指定延迟时间,而是根据浏览器的刷新频率而定(帧).
如果你想做逐帧动画的时候,你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。
通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率。
var requestId = window.requestAnimationFrame(func);