0

0

setTimeout居然还有第三个参数?

angryTom

angryTom

发布时间:2019-12-09 17:47:16

|

3221人浏览过

|

来源于博客园

转载

setTimeout居然还有第三个参数?

settimeout居然还有第三个参数?

说起setTimeout,各位再熟悉不过,用法也很简单:setTimeout(fun, delay)

但说起来你可能不信,用了这么多年的setTimeout居然有第三个参数。下面一起看看这个setTimeout第三个参数。

【相关课程推荐:JavaScript视频教程】  

我们先来看一段简单的代码:

setTimeout(function(x) {
    console.log(x);
}, 1000, 1);

控制台输出1,那么能不能继续加参数呢?我们继续来看下面这段代码:

setTimeout(function(x,y) {
    console.log(x+y);
}, 1000, 1, 2);

控制台输出的是3,很显然是第三和第四个参数的和。

看到这里很多小伙伴应该意识到了,是的,setTimeout的第三个参数作用就是给setTimeout第一个函数的参数。

通过查询MDN https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout  我们能看到关于第三个参数的描述:

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

所以,其实准确来讲,setTimeout可以有无数个参数,只是从第三个参数起,就是可选参数了。

好了,知道这个特性后我们可以解决什么问题呢?最经典的一个就是for循环内使用setTimeout了。

同徽B2B电子商务软件 V46
同徽B2B电子商务软件 V46

同徽B2B电子商务软件是国内第一个基于J2EE架构的电子商务商业程序,在国内同类软件中市场占有率位居第一。目前客户分布二十多个省份,三十几个行业,直接和间接服务500万企业,其中包括多家部级单位和世界500强企业:商务部、农业部、德赛集团、宝钢集团、江苏龙华集团、深圳中农股份、中集集团等。 。 网站参数管理运营商可对整个网站进行灵活的配置,适应不同的运营需求网站更新将信息生成静态页面,加快浏览速

下载
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代码 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout#%E5%85%BC%E5%AE%B9%E6%97%A7%E7%8E%AF%E5%A2%83%EF%BC%88polyfill%EF%BC%89,这里贴出传送门,感兴趣的可以去看。

下面是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).

本文来自 js教程 栏目,欢迎学习!  

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.3万人学习

Django 教程
Django 教程

共28课时 | 3.2万人学习

Excel 教程
Excel 教程

共162课时 | 12.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号