定时器方法第一个:setInterval()
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
定时器方法第二个:requestAnimationFrame()
参数是将要被调用函数的函数名,requestAnimationFrame()
调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求, 什么时候会执行由浏览器决定,一般默认保持60FPS的频率,大约每16.7ms调用一次requestAnimationFrame()
方法指定的函数,60FPS是理想的情况下,如果渲染的场景比较复杂或者说硬件性能有限可能会低于这个频率。
window.requestAnimationFrame()这个API是浏览器提供的js全局方法,针对动画效果。
用法如下:
var globalID;
function animate() {
// done(); 一直运行
globalID=requestAnimationFrame(animate);
// Do something animate
}
globalID = requestAnimationFrame(animate);//开始
cancelAnimationFrame(globalID);//结束
页面滚动事件(scroll)的监听函数,就很适合用这个api,推迟到下一次重新渲染。
$(window).on('scroll', function() {
window.requestAnimationFrame(scrollHandler);
});