定时器setTimeout和setInterval代码实例

setTimeout&setInterval

1. ->设置一个定时器(setTimeout),等到1000ms后开始执行对应的方法,方法执行完成后,定时器结束

window.setTimeout(function () {

}, 1000);

->设置一个定时器(setInterval),等到1000ms后开始执行对应的方法,方法执行完成后,定时器并没有结束,以后每隔1000ms都会把定时器中的方法执行一次...直到手动清除定时器为止

window.setInterval(function () {

}, 1000);

2、设置定时器的时候是有返回值的->返回的结果是一个数字,代表当前是第几个定时器

       var timer1=window.setTimeout(function(){console.log("第一个定时器");},1000);
       console.log(timer1);//->1
    
       var timer2=window.setTimeout(function(){console.log("第二个定时器");},1000);
       console.log(timer2);//->2
    
       var timer3=window.setInterval(function(){console.log("第三个定时器");},1000);
       console.log(timer3);//->3
    
       window.clearTimeout(1);//->清除定时器的时候,我们里面放一个数字,代表把这个数字代表的那个第N个定时器清除掉
       window.clearInterval(timer2);//->使用的是setTimeout设置的第二个定时器,使用clearInterval也可以把它清除掉

3. 例子，输出1-5

//->方法1：setInterval来实现一个多次运动的动画
       var n = 0;
       var timer = window.setInterval(function () {
           n++;
           console.log(n);
           if (n === 5) {
               window.clearTimeout(timer);
           }
       }, 1000);

//->方法2：setTimeout实现多次运动的动画
    var n = 0;
    var timer = null;
    function move() {
        //->在每一次执行方法之前,先把之前设置的没用的定时器清除掉
        window.clearTimeout(timer);
        n++;
        console.log(n);
        if (n === 5) {
            return;
        }
        //->每一次执行完成后,设置一个新的定时器,过1000ms后在重新的执行move ->"递归":自己执行的时候重新调用自己在执行
        timer = window.setTimeout(move, 1000);
    }
    move();