setInterval与setTimeout区别详解

爱被打了一巴掌 2022-08-13 06:59 254阅读 0赞

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区别详解][setInterval_setTimeout]

[setInterval_setTimeout]: http://www.17javascript.com/thread-44-1-1.html