你不知道的setTimeout第三个参数
三个参数
说起setTimeout，各位再熟悉不过，用法也很简单：setTimeout(fun, delay)。
但说起来你可能不信，用了这么多年的setTimeout居然有第三个参数。下面一起看看这个setTimeout第三个参数。
我们先来看一段简单的代码：
复制代码
setTimeout(function(x) {
console.log(x);
}, 1000, 1);
复制代码
控制台输出1，那么能不能继续加参数呢？我们继续来看下面这段代码：
复制代码
setTimeout(function(x,y) {
console.log(x+y);
}, 1000, 1, 2);
复制代码
控制台输出的是3，很显然是第三和第四个参数的和。
看到这里很多小伙伴应该意识到了，是的，setTimeout的第三个参数作用就是给setTimeout第一个函数的参数。
通过查询MDN（点击此传送门），我们能看到关于第三个参数的描述：
复制代码
var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);
复制代码
所以，其实准确来讲，setTimeout可以有无数个参数，只是从第三个参数起，就是可选参数了。
好了，知道这个特性后我们可以解决什么问题呢？最经典的一个就是for循环内使用setTimeout了。
复制代码
for(var i = 0; i<6; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
复制代码
上面的这个例子是一个经典的面试题，它会连续输出6次6，因为setTimeout是一个异步操作，而等到执行setTimeout时，for循环已经执行完毕，这时的i已经等于6，所以输出6次的6。关于解决方法我总结了好几种，感兴趣的小伙伴可以看我的上一篇博客《关于for循环中使用setTimeout》，在这篇博客结尾我提到了使用setTimeout第三个参数，那我们再来看看这种方法。
复制代码
for(var i=0;i<6;i++) {
setTimeout(function(j) {
console.log(j);
}, 1000, i);
}
复制代码
由于每次传入的参数是从for循环里面取到的值，所以会依次输出0~5。这当然还是作用域的问题，但是在这里setTimeout第三个参数却把i的值给保存了下来。这种解决方法比使用闭包轻快的多。
另外，第三个参数也可以作为函数来使用。
复制代码
for(var i=0;i<6;i++) {
setTimeout(function(j) {
console.log(j);
}, 1000, i);
}
复制代码
最后依次输出为，第一次0、第二次1。
可以看到第三个参数还可以是先执行，然后再执行函数。
最后，使用第三个参数需要注意的一点就是兼容问题，如果需要兼容IE9及以前的版本，需要引入一段MDN提供的兼容旧IE代码 ，这里贴出传送门，感兴趣的可以去看。
下面是MDN上关于兼容性的描述：
复制代码
Note: Passing additional arguments to the function in the first syntax does not work in Internet Explorer 9 and below. If you want to enable this functionality on that browser, you must use a polyfill (see the Polyfill section).
复制代码
标签: setTimeout
好文要顶 关注我 收藏该文
夜千灯
关注 - 1
粉丝 - 2
+加关注
2 0
« 上一篇： 关于for循环中使用setTimeout
posted on 2019-12-05 15:37 夜千灯 阅读(123) 评论(0) 编辑 收藏
刷新评论刷新页面返回顶部
注册用户登录后才能发表评论，请 登录 或 注册， 访问 网站首页。
【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】腾讯云热门云产品限时秒杀，爆款1核2G云服务器99元/年！
【推荐】阿里云双11返场来袭，热门产品低至一折等你来抢！
【推荐】天翼云双十一翼降到底，云主机11.11元起，抽奖送大礼
【推荐】流程自动化专家UiBot，体系化教程成就高薪RPA工程师
【活动】京东云服务器_云主机低于1折，低价高性能产品备战双11
【优惠】七牛云采购嘉年华，云存储、CDN等云产品低至1折
相关博文：
· setTimeout的第三个参数
· setTimeOut的第三个参数
· setTimeout第三个参数
· 你应该知道的setTimeout秘密
· setTimeout、setInterval被遗忘的第三个参数
» 更多推荐...
开放下载！《长安十二时辰》爆款背后的优酷技术秘籍首次公开
最新 IT 新闻:
· 华为nova6发布：搭载麒麟990拥有4G/5G双版本
· 韩国高考成绩提前泄露，网页源代码改成“2020”即可查询
· 多邻国获投3000万美元F轮融资，估值达15亿美元，跻身独角兽
· 大量台湾半导体人才跳槽到大陆
· 外媒：谷歌创始人脱身自保 可怜的皮查伊接过硅谷最糟糕的岗位
» 更多新闻...
Copyright © 2019 夜千灯
Powered by .NET Core 3.1.0 on Linux Powered By: 博客园 模板提供：沪江博客
< 2019年12月 >
日 一 二 三 四 五 六
1 2 3 4 5 6https://www.cnblogs.com/wl0804/p/11989727.html