js 定时器笔记
js 定时器笔记
本文是学习js定时器、单线程、同步异步任务的笔记，只适合初学者。
一、定时器（timer）
JavaScript提供定时执行代码的功能，该功能主要由setTimeout()和setInterval()这两个函数来实现
二、setTimeout()
1、使用规则
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。 第一个参数是函数名或者语句，第二个参数延迟的时间参数，单位为ms
var timerId = setTimeout(function|code, delay)
setTimeout('console.log(2)',1000);它返回定时器的编号，以后可以用来取消这个定时器。
2、使用注意
推迟执行的代码必须以字符串的形式，放入setTimeout。 因为引擎内部使用eval函数，将字符串转为代码。 如果推迟执行的是函数，则可以直接将函数名，放入setTimeout。 一方面eval函数有安全顾虑，另一方面为了便于JavaScript引擎优化代码，setTimeout方法一般总是采用函数名的形式
三、setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次。如果不取消的话，就会无限次的定时执行。 第一个参数是函数名或者语句，第二个参数是间隔执行的时间，单位为ms 例一：实现自增数据输出
var i=0
var timer=setInterval(function(){console.log(i++)},1000)
//不要在function传递i参数，不然得到的就是NaN
例二：实现定时器的功能
var timer=setInterval(function(){console.log(new Date)},1000)
四、解除定时器clearTimeout()，clearInterval()
setTimeout和setInterval函数，都返回一个表示计数器编号的整数值。 将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);五：举个例子 其实这篇文章写定时器的经典案例写的很棒JavaScrip同步、异步、回调执行顺序之经典闭包setTimeout分析
var i=0;
for(var i=0; i<10; i++){
setTimeout(function(){
console.log(i)
}, 1000)
}执行结果：
解析：先执行主线程的for循环，for循环执行了10次，把匿名函数添加了到任务序列10次。等for循环执行完毕，i变成10之后，把任务序列的函数添加到主线程，输出10次i=10.
var t = true;
setTimeout(function(){
t = false;
}, 1000);
while(t){console.log('end') } 执行结果：不停的输出end，不会再1000ms之后停止的。 解析：因为while循环是在主线程执行，主线程的while的循环不停止，是不会再执行任务队列里面setimeout的函数的。
六、单线程模型
五、六、七章的内容全部来源于 阮一峰JavaScript 标准参考教程（alpha） 单线程模型指的是，JavaScript 只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。
注意，JavaScript 只在一个线程上运行，不代表 JavaScript 引擎只有一个线程。事实上，JavaScript 引擎有多个线程，单个脚本只能在一个线程上运行（称为主线程），其他线程都是在后台配合。
七、同步任务和异步任务
五、六、七章的内容全部来源于 阮一峰JavaScript 标准参考教程（alpha） 程序里面所有的任务，可以分成两类：同步任务（synchronous）和异步任务（asynchronous）。
同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。
异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。
八、任务队列
JavaScript 运行时，除了一个正在运行的主线程，引擎还提供一个任务队列（task queue），里面是各种需要当前程序处理的异步任务。
首先，主线程会去执行所有的同步任务。等到同步任务全部执行完，就会去看任务队列里面的异步任务。如果满足条件，那么异步任务就重新进入主线程开始执行，这时它就变成同步任务了。等到执行完，下一个异步任务再进入主线程开始执行。一旦任务队列清空，程序就结束执行。
引用这一次，彻底弄懂 JavaScript 执行机制这篇文章的解析：
同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。 当指定的事情完成时，Event Table会将这个函数移入Event Queue。 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。 上述过程会不断重复，也就是常说的Event Loop(事件循环)。
九、异步与回调函数
来源：如果没有callback函数，会先执行f2，f3函数再执行f2函数。 但是如果f1，f2函数是有先后顺序的，必须f1执行完成，再执行f2的话（f1可能是获取ajax，f2是处理ajax数据），就需要回调函数。
给f1设置callback函数做参数，然后把这个参数当成函数执行，执行f1的过程中，设置了一个定时器，等数据到来之后，再去执行callback函数。然后把f2作为f1的参数来调用
function f1(callback){
setTimeout(function(){
//做某件事，可能很久
console.log('别急，开始执行f1')
for(var i=0;i< 100000;i++){
}
console.log('f1执行完了')
callback()
}, 0);
}
function f2(){
console.log('执行f2');
}
function f3(){
console.log('执行f3');
}
f1(f2) //当f1执行完之后再执行 f2
f3()10、函数节流
转载一篇函数节流与函数防抖，写的非常好，具体内容可看这篇文章。我不再赘述，我只记录一下节流的代码
var timer
function hiFrequency(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(function(){
console.log('do something')
}, 300)
}
hiFrequency()
hiFrequency()
hiFrequency()