setInterval与setTimeout区别详解



17javascript会员们都知道，setInterval和setTimeout这两个函数有什么作用，下面17javascript来详细说明他们的区别。

setInterval()和setTimeout()的两种使用方式及作用域

setInterval()是以指定的时间为周期调用函数的方法。

setTimeout()是延时指定的时间来执行某个函数的方法。

两个函数虽然作用不同，但传参方式和作用域是相同的，下面来具体分析一下。

以setInterval()为例：

第一个参数是用来传递要调用的方法，可以传递一个代码串，如下：

1 <script>
2     function fn(value){
3         alert("value=" + value);
4     }
5     setTimeout("fn(1)", 1000);
6 </script>

但是当在一个闭包里调用的时候，就会出现问题，如：



1 <script>
2     function outerFn(){
3         var value = 1;
4         function fn(){
5             alert("value=" + 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 = 1;
4         function fn(){
5             alert("value=" + value);
6             value += 1;
7         }
8         setInterval(fn, 3000);
9     }
10     outerFn();
11 </script>



但是这样又带来问题，如果想给fn传参数怎么办？可以像如下这样去写吗？



1 <script>
2     function outerFn(){
3         var value = 1;
4         function fn(n){
5             alert("value=" + 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=" + value);
5         }
6         setTimeout(fn, 1000);
7     }
8     outerFn(5);
9 </script>



如上，是利用了闭包的原理，fn作为内部函数，是可以访问包含它的outerFn的作用域中的变量的，因此我们想给fn传参，只要给outerFn传参就可以了。这在传递的参数复杂（比如是一个复杂的json）的情况下，很有用途。

原文：setInterval与setTimeout区别详解