JS函数的执行时机

1.刻舟求剑的故事

• 故事详情
  楚国有人坐船渡河时，不慎把剑掉入河中，他在舟上刻下记号，说：“这是我把剑掉下的地方。”当舟停驶时，船已经走了很远，剑是不会走动的。他还沿着记号跳入河中找剑，遍寻不获。

• 寓意
  刻舟求剑大家都听说过吧。 以静止的眼光来看待变化发展的事物，必将导致错误的判断。函数的执行时机呢可别刻舟求剑了。

2 例子

函数调用时机不同呢，它的结果也不同

• 例①没有调用

代码

let a = 1
function fn(){
  console.log(a)
}

问:打印出多少

答：不知，因为没有调用代码

• 例②调用函数

代码:

let a = 1
function fn(){
  console.log(a)
}
fn()

问:打印出多少

答:1

• 例③后调用

代码：

let a = 1
function fn(){
  console.log(a)
}

a = 2
fn()

问：打印出多少

答：2

• 例④先调用

代码

let a = 1
function fn(){
  console.log(a)
}

fn()
a = 2

问：打印出多少

答：1

• 例⑤尽量快打印a

代码：

let a = 1
function fn(){
  setTimeout(()=>{
    console.log(a)
  },0)
}

fn()
a = 2

问：打印出多少//setTimout把当前事做完了再马上做其他事

答：2

• 例⑥循环完再打印

代码：

let i = 0
for(i = 0; i<6; i++){
  setTimeout(() => {
    console.log(i)
  },0)
}

问：打印出多少

答：6个6//不是0到5，这里是for循环结束了执行setTimeout里的

3.要解决不打印6个6，写出让上面代码打印 0、1、2、3、4、5 的方法

• 方法一：用ES6的let打印出

代码：

for(let i = 0; i<6; i++){
  setTimeout(() => {
    console.log(i)
  },0)
}

问：打印出多少

答：是 0、1、2、3、4、5。因为 JS 在 for 和 let 一起用的时候会加东西

• 方法二：立即执行函数表达式

代码：

for(var i = 0;i <= 5;i++){
  (function(j){
    setTimeout(() => {
      console.log(j)
    }, 0)
  })(i)
}

得到结果：0、1、2、3、4、5。当每次for循环时，把此时的i变量传递到定时器中

• 方法三：给定时器传入第三个参数

代码：

for(var i=0;i<=5;i++){
  setTimeout((j) => {
    console.log(j)
  }, 0, i)
}

–continue

---

暂时到这里，感谢大家捧场
👍