一个菜鸟的互联网技术分享博客
您的位置: 主页 > setTimeout、setInterval被遗忘的第三个参数
advertisement

setTimeout、setInterval被遗忘的第三个参数

由于近期在找工作所以看了下js部分的面试题,被一道自己知道怎么处理的题的标题吸引了(setTimeout、setInterval被遗忘的第三个参数),题目是以下js打印出的是什么?(答案是6个6,大家都知道的)
  1. for(var i = 0 ; i <= 5 ;i++){  
  2.     setTimeout(function timer(){  
  3.         console.log(i)    
  4.     }, i * 1000)  
  5. }  
原因:setTimeout是一个异步函数,所以会把所有循环全部执行完毕
要想输出1,2,3,4,5方法如下:
方法一:闭包(或者立即执行函数)

  1. for(var i = 0 ; i <= 5 ;i++){  
  2.     (function(j){  
  3.         setTimeout(function timer(){  
  4.             console.log(j)  
  5.         } , j * 1000)  
  6.     })(i)  
  7. }  
方法二:使用ES6中的let定义i(变量不会提升)
  1. for(let i = 0 ; i <= 5 ;i++){  
  2.     setTimeout(function timer(){  
  3.         console.log(i)    
  4.     }, i * 1000)  
  5. }  
方法三:setTimeout的第三个参数
  1. for(var i = 0 ; i <= 5 ;i++){  
  2.     setTimeout(function timer(j){  
  3.         console.log(j)  
  4.     },i * 1000 , i)  
  5. }  
有点惊讶,在平时的使用中,我们一般只用到前面的两个参数,即
setTimeout ( code , ms )

code:延迟时间到期之后执行的代码块
ms:延迟时间

然后自己带着疑惑去查阅MDN之后,才发现,原来setTimeout函数不止有第三个参数,后面甚至可以紧跟无数个参数!

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

Additional parameters which are passed through to the function specified by functionor code once the timer expires.
上面这句话的意思是:param1,param2...paramN作为前面的回调函数的附加参数.
怎么理解这句话呢?
我们可以通过简单的代码来实践一下,毕竟实践出真知嘛。
例:

  1. setTimeout((a,b,c) => {  
  2.      console.log(a,b,c)  
  3. }, 2000"my""name""is zhangren",);  

打印出来的如下图所示:

不过要注意一点的是:
这种传参方式在IE9及更低的版本下是不起作用的,需要使用polyfill

zhangren.online
上一篇:关于Element ui Transfer (穿梭框)使用心得
下一篇:js中的深浅拷贝问题简析

您可能喜欢

​Web前端经典面试试题及答案

​Web前端经典面试试题及答案

​javascript小数乘法精确率填坑

​javascript小数乘法精确率填坑

​使input文本框不可编辑的3种方法

​使input文本框不可编辑的3种方法

​Js获取当前日期时间及其它操作

​Js获取当前日期时间及其它操作

​js实现九九乘法口诀

​js实现九九乘法口诀

回到顶部