setInterval与setTimeout

在本身用canvas画一个时钟时，画秒钟用的是利用图片将重复的线条遮住，可是会出现有两个秒钟线条同时存在，才想起setInterval有那么个坑，查了点资料，记录下，如有不对的或者未写到的点，还请你们指出，谢谢^_^

• 在此以前先科普下这个学习点

进程与线程的区别

借用阮一峰大大借用的比喻，实现一个小实例:

• 有一个大型工厂
• 工厂里有若干车间，每次只能有一个车间在做业
• 每一个车间里有若干房间，有若干工人在流水线做业

那么：

• 一个工厂对应的就是计算机的一个CPU，平时讲的多核就表明多个工厂
• 每一个工厂里的车间，就是进程，意味着同一时刻一个CPU只运行一个进程，其他进程在怠工
• 这个运行的车间（进程）里的工人，就是线程，能够有多个工人（线程）协同完成一个任务
• 车间（进程）里的房间，表明内存。

再深刻点：

• 车间（进程）里工人能够随意在多个房间（内存）之间走动，意味着一个进程里，多个线程能够共享内存
• 部分房间（内存）有限，只容许一个工人（线程）使用，此时其余工人（线程）要等待
• 房间里有工人进去后上锁，其余工人须要等房间（内存）里的工人（线程）开锁出来后，才能才进去，这就是互斥锁（Mutual exclusion，缩写 Mutex）
• 有些房间只能容纳部分的人，意味着部份内存只能给有限的线程

再再深刻:

• 若是同时有多个车间做业，就是多进程
• 若是一个车间里有多个工人协同做业，就是多线程
• 固然不一样车间之间的工人也能够有相互协做，就须要协调机制

感受一会儿就记住了这二者的概念及区别

1.setTimeout

• setTimeout()用来指定某个函数或字符串在指定的毫秒数以后执行；它会返回一个整数，表示定时器的编号，这个值能够传递给clearTimeout()用来清除定时器

/* 一秒钟后在控制台上打印出111 */
<script>
    setTimeout(function() {
        console.log(111);
    }, 1000)
</script>

• 也能够写成字符串参数的形式，但这种形式会形成javascript引擎两次解析，下降性能（1.引擎内部使用eval()函数，将字符串转为代码;2.代码执行的解析）

<script>
    setTimeout('console.log(111)', 1000)
</script>

2.在IE浏览器中使用定时器存在部分小问题：

• IE9浏览器只容许setTimeout有两个参数，不支持更多的参数，会在控制台输出NaN

  • 能够使用IIFE来进行参数的传递

setTimeout((function(x, y) {
    console.log(x+y);
})(1,2), 1000)

• IE8浏览器不容许向定时器中传递事件对象event

  • 能够将事件对象中的某些属性保存在变量中传递进去

div.onclick = function(e) {
    e = e || event;
    let type = e.type;
    setTimeout(function(e) {
        console.log(e.type);  /* 报错 */
        console.log(type);  /* click */
    }, 1000)
}

3.setInterval

• setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

HTML5标准规定，setTimeout的最短期间隔是4ms；setInterval的最短间隔时间是10ms，因此，小于了最短的时间间隔会被调整到最短期间隔

• 使用setInterval()时，定时器代码可能在代码再次被添加到队列以前尚未完成执行，致使定时器代码连续执行了屡次，但之间没有任何停顿。javascript引擎的解决方式就是：使用setInterval()时，仅当没有该定时器的任何其余代码实例时，才将定时器代码添加到执行队列中，确保定时器代码加入到队列中的最小时间间隔为指定间隔

但这也会致使两个问题：1.某些间隔被跳过2.多个定时器的代码执行之间的间隔可能比预期的小

• 以下图：

4.链式setTimeout

• 使用链式setTimeout来解决我画时钟的那个问题

setTimeout(function fn() {
    console.log(111);
    setTimeout(fn, 1000);
}, 1000)

• 使用链式模式调用setTimeout()，函数执行的时候都会建立一个新的定时器。第二个setTimeout()调用当前执行的函数，并为其设置另一个定时器。使得在前一个定时器代码执行完以前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。并且，它能够保证在下一次定时器代码执行以前，至少要等待指定的间隔，避免了连续的运行

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期好文推荐：

  • 画三角形
  • webpack打包（有面试题）
  • 时间戳转换成时间日期格式及去重