定时器：设定一个定时器，并且设定等待时间，当到达执行时间，浏览器会把对应的方法执行。

1. JS 定时器

JS 中的常用定时器有两种：（浏览器中就两种，NODE 中又多了一种）

  • setTimeout([function], [interval]) 一次

  • setInterval([function], [interval]) 多次

[function]：到达时间后执行的方法
[interval]：设置的等待时间，单位 ms

都是 window 下的方法，一般 window 都可以省略

  1. let count = 0;
  2. setTimeout(() => {
  3.   count++;
  4.   console.log(count);
  5. }, 1000);
  7. //=> 轮循定时器，每间隔一定时长，都会把设定的方法重新执行一次，知道定时器被清除
  8. let count = 0;
  9. setInterval(() => {
  10.   count++;
  11.   console.log(count);
  12. }, 1000)

2. 清除定时器

clearTimeout / clearInterval 这两种方法中的一个都可以清除用任何方法创建的定时器。

  1. 设置定时器会有一个返回值，这个值是一个数字，属于定时器的编号，代表当前的是第几个定时器（不管是基于哪个方法创建的定时器，这个编号都会进行累加）

  2. clearTimeout([序号]) / clearInterval([序号])，根据序号清除浏览器中的定时器，一般使用变量来接收那个序号，清除定时器的时候，都是传入这个变量

  1. let timer = setInterval(function() {
  3. }, 1000);
  4. timer; //=> 1

3. 执行顺序

题目一：

  1. console.log(1);
  2. var timer1 = window.setTimeout(function () {
  3.     console.log(2)
  4. },500);
  5. console.log(3);
  6. var tiemr2 = window.setTimeout(function () {
  7.     console.log(4);
  8.     var timer3 = setTimeout(function () {
  9.         console.log(6)
  10.     },200)
  11. },200);
  12. for(var i = 0; i < 900000000; i++){
  13.     //时间大概是 1500毫秒
  14. };
  15. console.log(5);

题目二：

  1. console.log(1);
  2. var timer1 = window.setTimeout(function () {
  3.     console.log(2)
  4. },500);
  5. console.log(3);
  6. for(var i = 0; i < 900000000; i++){
  7.     //时间大概是 1500毫秒
  8. };
  9. var tiemr2 = window.setTimeout(function () {
  10.     console.log(4);
  11. },200);
  12. console.log(5);

题目三：

  1. /*
  2. * 主任务队列先执行，依次输出 1 3，执行for，for循环完毕后 再输出 5；这时主任务队列执行完毕，等待任务队列中的代码开始执行，
  3. * */
  4. console.log(1);
  5. var timer1 = window.setTimeout(function () {
  6.     console.log(2)
  7. },500);
  8. console.log(3);
  9. for(var i = 0; i < 900000000; i++){
  10.     //时间大概是 1500毫秒
  11. }
  12. var tiemr2 = window.setTimeout(function () {
  13.     console.log(4);
  14. },200);
  15. for(var i = 0; i < 900000000; i++){
  16.     //时间大概是 1500毫秒
  17. }
  18. console.log(5);
  1. console.log(1);
  2. setTimeout(function () {
  3.     console.log(2)
  4. },200);
  5. while (true){
  7. }
  9. console.log(1);
  10. setTimeout(function () {
  11.     console.log(2)
  12. },0);
  13. console.log(3)
  1. /*
  2. * 定时器 有自己的默认最小时间，即使手写成0，也不是同步执行；也是个异步执行;
  3. * 清除定时器，我们可以混着用；clearInterval 也能清除 timeout
  4. * */
  5. var timer1 = window.setTimeout(function () {
  6.     console.log(12)
  7. },4000);
  8. clearInterval(timer1)