Javascript定时执行代码块方式
number:setInterval(func, msec)
此方法是每隔一定的时间(msec参数值)调用一次传给它的函数(func参数),若不主动调用clearInterval(number)取消定时器,则会一直执行下去。
function animate(){
// 需执行的代码
}
// 每秒60帧速率执行
let timerId = setInterval(animate, 1000 / 60);
// 取消定时器
clearInterval(timerId)
number:setTimeout(func, msec)
此方法是在一定时间(msec参数)后,调用一次传给它的函数(func参数),若需重复执行,则需在重复调用setTimeout
function animate(){
let start = +new Date(), end;
// 需执行的代码
end = +new Date()
// 重复执行
setTimeout(animate, 1000 / 60 - (end - start)); // 做次时间上的补偿,使之更接近1秒60帧的速率
}
animate()
提示: setInterval与setTimeout中的msec参数可不填写或填写不为正数的值,意思是使浏览器以它所允许的最小时间间隔来调用func函数。
HTML5 出的number:requestAnimationFrame(func)
setInterval与setTimeout都是开发者告诉浏览器,在某个大致的时间点上执行代码。若是在绘制动画,我们其实并不清楚绘制下一帧的最佳时机,相反,浏览器肯定比我们更了解绘制下一帧动画的最佳时机。
requestAnimationFrame为此而生!
浏览器会在最佳时机调用func函数,若需一直执行下去,则需在func内再次调用requestAnimationFrame(func)
,浏览器会给func传递一个从程序启动(页面载入)到调用func函数时的时间间隔(chrome浏览器)
let handleId = 0;
let lasttime = undefined;
// 浏览器会给函数传递一个从程序启动(页面载入)到调用animate函数时的时间间隔
function animate(time){
if (lasttime === undefined) { // 抛弃第一帧
lasttime = time;
} else {
let dt = time - lasttime; // 此帧距上一帧的时间间隔
lasttime = time;
// 需执行的代码
}
// 重复执行
handleId = requestAnimationFram(animate); // 做次时间上的补偿,使之更接近1秒60帧的速率
}
// 使浏览在最佳时机执行第一帧动画
handleId = requestAnimationFram(animate);
// ==== 取消 ====
cancelAnimationFrame(handleId);
提示: Chrome 浏览器调用动画回调函数的最大速率不超过每秒60次。
requestAnimationFrame的polyfill
(function (win) {
'use strict';
var startTime = +new Date(); //程序启动时的时间点
win.requestAnimationFrame = (function () {
return win.requestAnimationFrame ||
win.webkitRequestAnimationFrame ||
win.mozRequestAnimationFrame ||
win.msRequestAnimationFrame ||
function (callback) {
var self = this,
start, finish;
return win.setTimeout(function () {
start = +new Date();
callback(start - startTime); //将程序运行的总时长返回给回调函数
finish = +new Date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
}
})();
win.cancelAnimationFrame = (function () {
return win.cancelAnimationFrame ||
win.webkitCancelAnimationFrame ||
win.mozCancelAnimationFrame ||
win.msCancelAnimationFrame ||
function (id) {
win.clearTimeout(id);
}
})();
})(window)