今天小编给大家分享一下setTimeout的第三个参数是什么及怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
网站的建设成都创新互联专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为汽车玻璃修复等企业提供专业服务。我们先来看一段简单的代码:
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。
可以看到第三个参数还可以是先执行,然后再执行函数。
下面是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的第三个参数是什么及怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。