setTimeout和setInterval

Love The Way You Lie 2023-07-13 15:30 15阅读 0赞

**概念：**  
超时调用概念：setTimeout(func,ms)  
等待ms时间之后执行回调函数func，只执行一次，调用setTimeout会返回一个ID，表示超时调用，超时调用ID是计划执行代码的唯一标识，可以通过它来取消超时调用clearTimeout(ID)。  
间歇调用概念：setInterval(func,ms)  
按指定的时间间隔执行代码，间歇调用ID比较重要，clearInterval(ID);

**用途**：实际中用得更多的是setTimeout模拟间歇调用；  
使用超时调用时，没必要跟踪超时调用ID，因为每次执行完代码之后，如果不在设置另一次超时调用，调用就会自动停止。  
在开发环境中很少使用间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

**实例：**  
需求一：每间隔1秒打印一个累加的数字（打印0-10 循环执行）：  
1.用setInterval()实现：

var i = 0;
    var timeId = setInterval(function(){ 
        console.log(i);
        i = i < 10?++i:i=0;
    },1000);

2.用setTimeout()实现：（setTimeout模拟setInterval方式）

var i = 0;
    setTimeout(add,1000);
    function add(){ 
        console.log(i);
        i = i < 10?++i:i=0;
        setTimeout(add,1000);
    }

需求二：每个1秒更新背景颜色为红、绿、蓝，并且鼠标放上去停止，鼠标移开继续变换三种颜色。

.red { 
                background: red;
            }
    
            .green { 
                background: green;
            }
    
            .blue { 
                background: blue;
            }

当然上面的需求也可通过CSS动画完成：

div.cols{ 
                background: red;
                animation: myfirst 6s linear infinite;
                -moz-animation: myfirst 6s;
                -webkit-animation: myfirst 6s linear infinite;
                -o-animation: myfirst 6s;
            }
      /*鼠标放上去停止动画*/
            div.cols:hover{ 
                animation-play-state:paused;
            }
              @keyframes myfirst{ 
                  0%{ background:red;}
                  50%{ background: green;}
                  100%{ background: blue;}
      
              }