Web Api · setTimeout补充

写在前面

平时使用中，我们只会给setTimeout()传递两个参数。但其实该函数是支持多个参数的。

• 参数1：可以是表达式或函数；
• 参数2：可以省略，默认为0；
• 参数3，4，···，n：传递给函数的参数；

用例

页面及需求：

<p>点击按钮 2 秒后输出 "hello"。</p>
<p>实例中，我们也会输出传递给 alertFunc() 函数的参数 ( IE9 及更早版本不支持 )。</p>

<button onclick="myStartFunction()">开始</button>

<p id="demo"></p>
<p id="demo2" style="color:red;"></p>

具体实现：

• 常规写法

var myVar;
function myStartFunction() {
    myVar = setTimeout(alertFun,2000,'Angular','Vue');
}
function alertFun(param1,param2) {
    document.getElementById('demo').innerHTML = 'hello';
    document.getElementById('demo2').innerHTML = 'Frameworks: ' + param1 + ',' + param2;
}

• 匿名函数写法

var myVar;
function myStartFunction() {
    myVar = setTimeout((param1,param2) => {
        document.getElementById('demo').innerHTML = 'hello';
        document.getElementById('demo2').innerHTML = 'Frameworks: ' + param1 + ',' + param2;
    },2000,'Vue','Angular')
}

或者：

var myVar;
function myStartFunction() {
    myVar = setTimeout(() => {
        alertFun('Vue','Angular');
    },2000)
}
function alertFun(param1,param2) {
    document.getElementById('demo').innerHTML = 'hello';
    document.getElementById('demo2').innerHTML = 'Frameworks: ' + param1 + ',' + param2;
}

补充

结合异步、作用域的一个经典题目：

for (i=0; i<5; i++) {
  console.log(i);
}

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

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

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

上述4段代码，分别输出什么？
请到Chrome控制台里验证一下，看一下是否跟自己所想的一样