[乐意黎]JS中的setTimeout与setInterval

我就是我 2022-05-28 01:08 279阅读 0赞

## setTimeout 只在指定时间后执行一次       ##

## setInterval 以指定时间为周期循环执行      两种方法根据不同的场景和业务需求择而取之， ##

一般情况下setTimeout用于延迟执行某方法或功能，  
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

##     ##

## setTimeout ##

例一：

setTimeout(function()\{   
  debugger;//1  
  console.log("aerchi");  
  debugger;//2  
  setTimeout(function()\{   
    debugger;//4  
    arguments.callee;  
  \},1000);  
debugger;//3  
\},1000)  
10:07:59.211 15  
10:08:02.939 VM4910:3 aerchi

例二：  
setTimeout(function()\{   
  console.log("aerchi");    
\},10\*1000)  
10:08:19.642 17  
10:08:29.634 VM4913:2 aerchi

\*\*\*\*\*\*

![20180327101801145][]

这两个定时器的基本含义，只要是学前端的肯定没有不知道的。为什么说定时器颠覆了我们以往的认知呢？

因为定时器的回调函数并不是相当于在时间到了就执行**，  
而是有一个主js执行进程，这个进程是页面刚加载的时候页面按照加载顺序执行的js代码，  
此外还有一个需要在进程空闲的时候执行的代码队列，而我们所说的定时器的回调就是相当于（以上的例一为例）在1000ms之后把定时器回调放入到空闲队列中（注意，空闲队列有可能还有其它的代码，比如点击事件，因此定时器回调放入的位置不一定是空闲队列的开始位置！）**  
  
举个例子：

var i=0;

function a()\{

t=setTimeout(function()\{console.log("aerchi")\},0);

a();

alert("乐意");

![20180327101925512][]

此时你会发现先弹出乐意，又弹出的aerchi！！

**好了，可以简单理解为定时器和js其他程序是并行执行的，jquery的作者也有一篇文章专门介绍这个队列的，有兴趣的可以搜一下看看！！**

接下来说第二点，就是例一与例二的区别：

**setInterval有个很烦的地方就是当js主程序空闲时候，执行代码队列里面的代码的时候**

**如果此时候有一个问题，  
定时器是等到回调执行完，才开始计时进行下次循环呢？  
还是只要一次计时完毕，插入回调之后不管回调执不执行就开始计时呢？  
答案显然是后者，  
这也就是我说setInterval坑比的原因啊，  
因为这会出现一种情况，当我们插入回调的时候前队列有别的代码在执行，这时候回调肯定是不会执行的，因此如果这个时候无限定时时间到了会再次插入回调，这个时候如果发现队列中的第一次回调没有执行，那么再次插入的回调浏览器就默认取消，（这是以防出现回调连续执行多次的情况）但是这又引发了新的情况就是有些回调是不能取消掉的？**

这就是经常使用例一代替例二的原因。

## setInterval  ##

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

### 语法 ###

setInterval(code,millisec[,"lang"])

<table style="color:rgb(0,0,0);margin:15px 0px 0px;padding:0px;border:1px solid rgb(170,170,170);width:809px;font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);">参数</th> 
   <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);">描述</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">code</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">必需。要调用的函数或要执行的代码串。</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">millisec</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。</td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

## 实例 ##

<html>
    <body>
    
    <input type="text" id="clock" size="35" />
    <script language=javascript>
    var int=self.setInterval("clock()",50)
    function clock()
      {
      var t=new Date()
      document.getElementById("clock").value=t
      }
    </script>
    </form>
    <button οnclick="int=window.clearInterval(int)">
    Stop interval</button>
    
    </body>
    </html>

<html>
    <body>
    <input type="text" id="clock" size="35" />
    <script language=javascript>
    var int=self.setInterval("clock()",50)
    function clock()
      {
      var t=new Date()
      document.getElementById("clock").value=t
      }
    </script>
    <button οnclick="int=window.clearInterval(int)">Stop interval</button>
    </body>
    </html>

![20180327103224609][]  
注: 停止时，可用清空console 及console历史，刷新当前页面.

[20180327101801145]: /images/20220528/53b54b7cb02948f0ab555eb575727990.png
[20180327101925512]: /images/20220528/d708e2ea83cd4675bf4c1ff052cf06d7.png
[20180327103224609]: /images/20220528/1818ddd663a847b7b2b8449d43ef9b17.png