JS函数的执行时机

本文详细介绍了JavaScript的单线程运行机制、异步任务的执行流程以及EventLoop事件循环。通过实例分析了setTimeout在不同情况下的执行顺序,并讨论了如何利用闭包解决异步任务中变量共享的问题。最后,展示了如何通过立即执行函数实现特定的计时器效果,以打印出0-5的序列。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.JS运行机制

JS是单线程的,同一个时间只能做一件事。这是因为JS是脚本语言,与用户交互,以及操作DOM。若多线程同时操作DOM,浏览器不知道以哪个为准,会造成混乱。

HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。因为有些异步调用操作耗时较长,为了避免干等着耗时。将所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。

1.1 同步任务

同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

1.2 异步任务

异步执行的运行机制:
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。
只要主线程空了,就会去读取"任务队列"。

1.3 Event Loop

主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

1.4 定时器

用setTimeout()和setInterval()创建。
setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。
HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。另外,对于那些DOM的变动(尤其是涉及页面重新渲染的部分),通常不会立即执行,而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。
需要注意的是,setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。

2.解释计时器打印6个6

具体代码如下:

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
} //  结果为:666666

上述代码,js在执行过程中碰到 setTimeout时会把放进任务队列的尾巴,而继续执行主线程上的任务,即for循环。循环结束后i=6,任务队列中setTimeout执行打印出i的时候,会打印出6。

3.使用计时器打印0-5

下述代码可以打印出0-5:

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}   //结果为:012345

由于let会创建隐藏作用域,5次循环就有5个不同的i,保留住了i当时的值,所以能打印出012345。

4.其他方法打印0-5

使用立即执行函数。因为立即执行函数内部形成了一个单独的作用域:

let i = 0;
for(i = 0; i<6; i++){
  (function(i){
    setTimeout(
    console.log(i),0)
  })(i)
}  //结果为:012345
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值