黑马程序员技术交流社区

标题: 【上海校区】setTimeout的第三个参数你可能不知道的作用 [打印本页]

---

作者: ljhsnmbb    时间: 2019-4-25 12:18
标题: 【上海校区】setTimeout的第三个参数你可能不知道的作用
说起来你可能不相信，setTimeout居然有第三个参数，我以前也没用过这个，但最近看到一个代码解决了for循环里面加入了setTimeout的例子，下面一起看看这个setTimeout第三个参数。

[JavaScript] 纯文本查看 复制代码

for(var i = 0; i<6; i++){

    setTimeout(function(){

        console.log(i);

    },1000);

}

看到上面的这个for例子，相信很多人都能脱口而出，它会连续输出6次6，因为setTimeout是一个异步操作，而等到执行setTimeout时，for循环已经执行完毕，这时的i已经等于6，所以输出6次的6。

闭包
那么怎么改呢？说说最常见的改法就是使用闭包。

[JavaScript] 纯文本查看 复制代码

for(var i=0; i<6; i++){

    (function(j){

        setTimeout(function(){

            console.log(j);

        },j*1000);

    })(i);

}

通过闭包，将i的变量驻留在内存中，当输出j时，引用的是外部函数A的变量值i，i的值是根据循环来的，执行setTimeout时已经确定了里面的的输出了。

函数传参
还有一种就是给setTimeout添加第三个参数。

[JavaScript] 纯文本查看 复制代码

for(var i=0;i<6;i++){

    setTimeout(function(j){

        console.log(j);

    },i*1000,i);

}

由于每次传入的参数是从for循环里面取到的值，所以会依次输出0~5。

看了上面的代码，相信你对这个setTimeout的第三个参数作用大概了解了，是的，它就是给setTimeout第一个函数的参数。

翻一下MDN文档，里面确实有记录setTimeout第三个及后面的参数的。下面我们来看看这个代码

[JavaScript] 纯文本查看 复制代码

function sum(x,y,z){

    console.log(x+y+z);

}

setTimeout(sum,1000,1,2,3);

上面第二行打印出了6，1+2+3=6（11是setTimeout timeId）。

可以看出，第三个及以后的参数都可以作为sum函数的参数。

第三个参数作为函数

[JavaScript] 纯文本查看 复制代码

var i=0;

setTimeout(function(){

    console.log('第二次'+i)

},3000,setTimeout(function(){

    console.log('第一次'+i);

    i++;

},1000));

最后依次输出为 第一次0 第二次1

可以看到第三个参数还可以是先执行，然后再执行函数。

今天就到这里了，有没有get到这个点，我翻了之前自己写过的关于setTimeout和setInterval的相关文章，都没有谈到第三个参数的，中文的w3c教程也没看到。

利用好setTimeout的第三个参数，有时候会有意向不到的收获。希望这篇文章对你有所帮助。本文转自 http://caibaojian.com/settimeout-pram3.html

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2