【JS】执行机制解析，设置定时器、取消定时器

目录

JavaScript 执行机制

JavaScript 定时器

1、setTimeout()

2、setInterval() 

3、setImmediate()

4、requestAnimationFrame()

5、clearTimeout() 取消定时器

6、 clearInterval（）取消定时器

6、使用setTimeout模拟setInterval行为

setInterval与setInterval的区别

---

JavaScript 执行机制

浏览器（ JavaScript 引擎）执行 JavaScript 的机制是基于事件循环的。由于 JavaScript 是单线程，同一时间只能执行一个任务。为了避免某些长时间任务造成无意义等待，JavaScript 引入了异步概念。

同步任务直接在主线程队列中顺序执行，而异步任务会进入另一个任务队列，不会阻塞主线程。等到主线程队列空了（执行完了）的时候，就会去异步队列查询是否有可执行的异步任务了（异步任务通常进入异步队列之后还要等一些条件才能执行，如 ajax 请求、文件读写），如果某个异步任务可以执行了便加入主线程队列，以此循环。

JavaScript 定时器

定时器也是一种异步任务，通常浏览器都有一个独立的定时器模块，定时器的延迟时间就由定时器模块来管理，当某个定时器到了可执行状态，就会被加入主线程队列。

另外，多个定时器如不及时清除（clearTimeout()），会造成干扰，使延迟时间更加捉摸不透。所以，不管定时器有没有执行完，要及时清除不需要的定时器。

1、setTimeout()

设置一个定时器，在定时器到期后执行一次函数或代码段：setTimeout(fn, x) 表示延迟 x 毫秒之后执行 fn 。

var timeoutId = setTimeout(code, delay, param1, param2, ...)
var timeoutId = setTimeout(func, delay, param1, param2, ...)

• timeoutId 定时器ID
• func 延迟后执行的函数
• code 延迟后执行的代码字符串，不推荐使用
• delay 延迟的时间（单位：毫秒），默认值为0
• param1,param2 向延迟函数传递而外的参数，IE9以上支持 

1. HTML5 规范规定最小延迟时间不能小于 4ms ，即 <