JS闭包异步问题

假设我们现在想要先执行f2,执行完f2之后在紧跟执行f1。我们应该这样写:👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function f1(){
setTimeout( ()=>{
console.log("this is f1",new Date());
},2000)
}

function f2(callback){
setTimeout( ()=>{
console.log("this is f2",new Date())
callback()
},2000)
}

console.log("start time:",new Date())
f2(f1)

这样他会先打印”start time”,过两秒后打印”f2”的时间,再过2s后再打印”f1”

image-20210713003026939

image-20210713003317016

若换一种写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 function f1(){
setTimeout( ()=>{
console.log("this is f1",new Date());
},2000)
}

function f2(){
setTimeout( ()=>{
console.log("this is f2",new Date())
},2000)
}

console.log("start time:",new Date())

f2()
f1()

这样并不能达到异步的效果,它会先打印”start time”,之后在接下来的语句中,它会执行f2()、f1() ,f1打印的时间应该和f2打印的时间是一样的

解释:这里f1的执行,并不需要等待f2执行完 跳出来之后再执行,这里就像是解析语句一般,解析完“要执行f2()”,之后解析“要执行f1()”,它两之间就几个微秒的间隔

image-20210713004030715


sequenceDiagram Note over 主 线: 解析"start time" Note over 主 线: 解析f2() 主 线->>+支线1: 给我去执行f2() Note over 支线1: 执行f2() Note over 主 线: 解析f1() 主 线->>+支线2: 给我去执行f1() Note over 支线2: 执行f1()
  1. 主线先解析”start time”

  2. 主线解析“要执行f2()”,然后把f2的具体内容交给支线1去执行,支线1与主线互不干扰,两者并行

  3. 主线解析“要执行f1()”,然后把f1的具体内容交给支线2去执行,支线2与主线互不干扰,两者并行

    (与此同时,支线1继续执行f2的内容,理论上应该还没执行完f2 因为主线从解析f2()到解析f1()仅需大概6微秒左右[视芯片而定吧])

这里用 new Date().getTime() 打印了时间戳,

“start time” 与f2 相差 2012ms,也就是2s + 12ms

f2和f1的时间就差了1ms

image-20210713010648477


若直接用 new Date().getMilliseconds() 打印ms:

image-20210713011331809image-20210713011353347

大概就是看进位吧?!

反正就是两者的间隔时间很短,并不会出现执行完f2()在执行f1()的情况