JS 函数的执行时机

2022-07-18  本文已影响0人  饥人谷_折纸大师

说到JS函数的执行时间,我们先引入一个概念,setTimeout()定时器的用法。

setTimeout()

setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。换句话说就是该定时器在定时器到期后执行一个函数或指定的一段代码。

语法格式可以是以下两种:

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

例子

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

本代码输出结果会是六个6,先给定一个全局变量i=0,然后进入for循环,进入setTimeout()定时器时,会设定为尽快执行,可以理解为先把setTimeout()外面的for循环执行结束再进行setTimeout()定时器内的命令。所以for循环执行完毕,此时再执行setTimeout()命令,它取找变量i,此时已经得到了六个i=6,然后这六个6再进入setTimeout()定时器,执行打印命令。最后则输出六个6。

如果想让上述代码输出[0,1,2,3,4,5]的话则改成

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

只需要将上述代码中的let i = 0放入for循环中,这次i只会在for循环的作用域里面执行,且let只能声明一次,且只在本轮循环中生效。所以let与for循环配合,每次循环的i都是一个新的变量,最后for循环结束,也是不同的i进入定时器,最后输出[0,1,2,3,4,5]

其他方法

  1. 闭包
let i 
for(i = 0; i<6; i++){
  !function(j){
      setTimeout(()=>{
        console.log(j)
      },0)
  }(i)
}
  1. 利用 setTimeout 的第三个参数
let i
for(i = 0; i<6; i++){
    setTimeout((value)=>{
      console.log(value)
    },0,i)
}
  1. 利用立即执行函数
for (var i=0; i<6; i++) {
    (function(j) {
        setTimeout(_ => {
            console.log(j)
        }, 0)
    })(i)
}
上一篇下一篇

猜你喜欢

热点阅读