定时器复习

最新推荐文章于 2025-04-18 20:10:40 发布

weixin_34234721

最新推荐文章于 2025-04-18 20:10:40 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzzzzzzsy/p/6746671.html

本文深入讲解了JavaScript中定时器的概念及应用，包括setTimeout与setInterval的区别，并通过具体示例介绍了如何设置与清除定时器，以及如何利用递归定时器实现动画效果。

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

//  5秒定时器
var n =0;
        var timer = window.setInterval(function(){
            n++;
            console.log(n);
            if(n === 5){
                window.clearTimeout(timer);
            }
        },1000);*/

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