JavaScript 定时器详解

1. setTimeout: 用来指定某个函数或字符串在指定的毫秒数之后执行 只执行一次

clearTimeout() 清除定时器

三种用法：

//1. setTimeout(函数，延迟时间-ms为单位)

setTimeout(function(){
	alert("延迟弹窗");
}, 1000);

//2. setTimeout(函数名，延迟时间-ms为单位)

var a = function(){
	alert("延迟弹窗");
}
setTimeout(a,1000);

//3. setTimeout("全局函数()"，延迟时间-ms为单位)  不推荐这么写

var b = function(){
	alert("延迟弹窗");
}
setTimeout( "b()" ,3000);s
//需要满足b是全局函数；要加引号，否则会直接执行；3s后通过eval执行
//eval会单独开一个作用域帮助执行，只能执行全局变量的函数，因此b一定要是全局变量

定时器的函数需要参数

function fn(a,b){
	alert( a + b );
}
setTimeout(fn,3000,1,2);//延迟时间后跟函数的实参

2. setInterval: 用来指定某个函数或字符串在指定的毫秒数之后执行 无限循环

clearInterval() 清除定时器

参数与写法与setTimeout一样，不同在于它会持续执行

清除定时器（定时器可能有很多，需要获取对应定时器的编号）

var timer = setInterval(function(){//得到定时器的编号
	console.log("延迟弹窗");
}, 1000);

document.onclick = function(){
	clearInterval(timer);//清除定时器
}

延迟时间是有下限的，浏览器通常默认的刷新频率为1s 60次

requestAnimationFrame: 浏览器专门为动画提供的API 浏览器会自动优化方法的调用 页面不是激活的状态下 动画暂停 有效节省CPU开销

cancelAnimationFrame() 清除定时器

用法与setTimeout相似 只是不需要设置时间间隔，只执行一次，所以要重复调用

function fn(){
	requestAnimationFrame(fn);
}
requestAnimationFrame(fn);