首页 > 代码库 > setInterval()和setTimeout()的两种使用方式及作用域
setInterval()和setTimeout()的两种使用方式及作用域
setInterval()是以指定的时间为周期调用函数的方法。
setTimeout()是延时指定的时间来执行某个函数的方法。
两个函数虽然作用不同,但传参方式和作用域是相同的,下面来具体分析一下。
以setInterval()为例:
第一个参数是用来传递要调用的方法,可以传递一个代码串,如下:
1 <script>2 function fn(value){3 alert("value="http://www.mamicode.com/+ value);4 }5 setTimeout("fn(1)", 1000);6 </script>
但是当在一个闭包里调用的时候,就会出现问题,如:
1 <script> 2 function outerFn(){ 3 var value = http://www.mamicode.com/1; 4 function fn(){ 5 alert("value="http://www.mamicode.com/+ value); 6 value += 1; 7 } 8 setInterval("fn()", 3000); 9 }10 outerFn();11 </script>
会出现错误:Uncaught ReferenceError: fn is not defined
原因是fn()是以字符串的方式传递的,它的作用域是全局作用域,全局作用域是无法访问到fn()的。
解决的办法是fn以函数引用的方式传递,也就是setInterval()的第二种传参方式。
1 <script> 2 function outerFn(){ 3 var value = http://www.mamicode.com/1; 4 function fn(){ 5 alert("value="http://www.mamicode.com/+ value); 6 value += 1; 7 } 8 setInterval(fn, 3000); 9 }10 outerFn();11 </script>
但是这样又带来问题,如果想给fn传参数怎么办?可以像如下这样去写吗?
1 <script> 2 function outerFn(){ 3 var value = http://www.mamicode.com/1; 4 function fn(n){ 5 alert("value="http://www.mamicode.com/+ n); 6 } 7 setTimeout(fn(5), 1000); 8 } 9 outerFn();10 </script>
答案是不可以的,函数只写函数名,是函数引用;后面加括号是函数执行。
1 setTimeout(fn, 1000); //fn的引用2 setTimeout(fn(5), 1000); //fn直接执行
所以第7行,没有按照预期延迟1000毫秒执行fn(5),而是立刻就执行了。这要注意和上面第一种方式——传递代码字符串的不同。
如果确实有从外部传参的需要,该怎么办呢?
1 <script>2 function outerFn(value){3 function fn(){4 alert("value="http://www.mamicode.com/+ value);5 }6 setTimeout(fn, 1000);7 }8 outerFn(5);9 </script>
如上,是利用了闭包的原理,fn作为内部函数,是可以访问包含它的outerFn的作用域中的变量的,因此我们想给fn传参,只要给outerFn传参就可以了。这在传递的参数复杂(比如是一个复杂的json)的情况下,很有用途。
setInterval()和setTimeout()的两种使用方式及作用域
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。