定时器：基础认知
定时器
定时器概念
是程序按指定的时间间隔（反复）自动的执行一项任务
定时器方法属于window对象
如果在该方法中使用this，this的值在非严格模式下返回的是window对象，在严格模式下返回的是undefined。分为一次性定时器和周期性定时器
一次性定时器
setTimeout()，接收两个参数：要执行的代码和以毫秒表示的时间，只在等待时间到达后执行一次
第一个参数可以是一段包含JavaScript代码的字符串（和使用eval()方法的字符串相同），也可以是一个函数，建议使用函数作为参数
第二个参数表示等待时间，但需要特别注意的是，经过该段时间后，代码不一定执行。（定时器执行顺序会导致一些问题）
setTimeout(function(){
alert(‘hello world’);
},100);
//或者
setTimeout(“alert(‘hello world’)”,100);
- 清除一次性定时器：
setTimeout()方法每次被调用都会返回一个新的数值，连续不重复,作为该方法的唯一标识符，如果需要取消一次性定时器，可以在执行前设置clearTimeout()。
var timeoutId=setTimeout(function(){alert(‘hello world’)},1000);
clearTimeout(timeoutId);//在未调用之前清除了定时器
只要在指定的时间之前设置clearTimeout()就可以让一次性定时器不执行。因为一次性定时器只执行一次，所以确认需要调用时，不需要去清除。
周期性定时器
setInterval()，接收的参数类型和一次性定时器相同，按照指定的时间间隔（第二个参数）去重复执行代码，直到该定时器被取消或页面被卸载。
- 清除周期性定时器
var i=0;
var timerID=setInterval(function(){
console.log(i);
i+=1;
if (i>10){clearInterval(timerID)}
},100);
同一次性定时器相同，都会返回一个唯一标识符，在该定时器未停止之前，这个唯一标识符是不变的，下次被重新调用，会返回另一个不同的数值。在达到清除条件时，设置clearInterval()，因为周期性定时器会一直执行下去，所以必须设置清除。
定时器与调用队列
浏览器是多线程程序，可同时执行多个任务，但，JavaScript是一个单线程的解释器，一个时刻只能执行一项任务。
为了控制要执行的代码，就有一个JavaScript任务队列，这些任务会按它们添加到队列的顺序执行，定时器的任务函数会在前面代码执行完之后才执行，所以会存在等待时间超过设定的时间的情况。
例子
for(var i=0;i
在控制台中输入以上代码，会输出三个3，原因是当浏览器读到定时器时，只是把任务函数加入了回调队列，但必须在主程序（for循环）执行完后才会执行，而主程序执行完后，i的值为3，然后调用已经在任务队列中等待的三个定时器任务函数，则都输出相同的3。
一次性定时器和周期性定时器的比较
一次性定时器模拟周期性定时器
var i=0
setTimeout(function(){
if (i
使用一次性定时器时，不必跟踪定时器ID，因为每次执行代码后，如果不再设置另一次调用，定时器就会自动停止。
由于一次性定时器是在当前任务函数执行完之后，才开始执行下一次定时器函数，所以定时器中所设置的间隔时间是从当前任务函数执行完之后开始计算的，这一点和周期性定时器不同。
周期性定时器模拟一次性定时器
var timerID=setInterval(function(){
alert('hello world');
clearInterval(timerID);
},100);
必须设置定时器清除，否则周期性定时器会一直执行下去。
周期性定时器中的时间间隔是指每隔某段时间就调用一次，而不管每次执行任务函数花费多长时间，如果任务函数执行时间超过了设定的时间间隔，就会发生错误。
总结
使用定时器时优先选用一次性定时器，链式调用setTimeout来实现周期性定时器的效果。
注意定时器的任务函数添加进任务队列和执行顺序。
关键字：JavaScript, 定时器
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
