怎么让链式调用setTimeout停止

Posted liveoutfun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么让链式调用setTimeout停止相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
            width:100%;
            height: 100%;
                    
        }

        .wrapper{
          width:100%;
          height:100%;
          background: url(images/body.gif) no-repeat;
          background-repeat: repeat-x;
          padding-top:20px;
        }

        .logo{
           
           width:150px;
           height:150px;
           position:absolute;
           top:175px;
           left:612px;
           opacity: 0;
           background: url(images/btn_hover.jpg) no-repeat;
           transition:1s;
          
           

        }

        .logo:hover{
          opacity:1;
          transition:1s;

        }

        .countDown{
           width:600px;
           height: 660px;
           background: url(images/miaov_bg.jpg) no-repeat;
           margin:0 auto;
           position:relative;
        }

        

        .countDown .timeUp{
           
           position: absolute;
           top:93px;
           width:100%;

        }

        .countDown .timeUp span{

           color:white;
           font-size:14px;
           position:absolute;
           display: inline-block;
           

        }

         .countDown .timeUp span:nth-child(1){

             left:144px;

         }

          .countDown .timeUp span:nth-child(2){

             left:286px;

         }

          .countDown .timeUp span:nth-child(3){

             left:365px;

         }

          .countDown .timeUp span:nth-child(4){

             left:450px;

         }

         .countDown .timeUp input{
            
           
                height:16px;
                line-height:16px;
                background: none;
                position:absolute;
                width:70px;
                font-weight:bold;
                outline-style: none;
                border:0;
                text-align:center;
                color:#666;

         }


           .countDown .timeUp .inputYear{
             
               left:200px;
               top:2px;
           }


             .countDown .timeUp .inputMath{
              
               left:300px;
               top:3px;
           }


             .countDown .timeUp .inputDay{
             
               left:380px;
               top:3px;
           }


           .countDown .timeCenter{

                  position:absolute;
                  width:100%;
                  top:312px;
                  text-align:center;
                  color:white;
                  font-size:20px;
                 
           }
           .countDown .timeCenter span{
             
                color:orange;
           }



          .countDown .timeDown{
               
                position:absolute;
                top:388px;
                width:100%;

          }

          .countDown .timeDown span {

              position:absolute;
              color:orange;
              font-size:30px;

          }


           .countDown .timeDown span:nth-child(1){

                left:100px;

           }


            .countDown .timeDown span:nth-child(2){

               left:222px;
               
           }




            .countDown .timeDown span:nth-child(3){

               left:352px;
                
           }



            .countDown .timeDown span:nth-child(4){

              left:458px;
               
           }

    </style>
</head>
<body>
       <div class="wrapper">

           <div class="countDown" >

                <p class="timeUp" id="timeUp">
                     <span id="days">请输入:</span>
                     <span id="hours"></span>
                     <span id="minutes"></span>
                     <span id="seconds"></span>
                     <input type="text" class="inputYear" value="2018">
                     <input type="text" class="inputMath" value="12">
                     <input type="text" class="inputDay"  value="22">
                </p>

                <p class="timeCenter" id="timeCenter">
                  
                   现在距离 - <span>2018年12月22日</span> - 还剩:

                 </p>

                <p class="timeDown" id="timeDown">
                  
                     <span>000</span>
                     <span>00</span>
                     <span>00</span>
                     <span>00</span>

                </p>
                
           </div>

           <div id="logo" class="logo"></div>
           
       </div>

     <script>

         var start=document.getElementById("logo");

         var timeUp=document.getElementById("timeUp");

         var timeCenter=document.getElementById("timeCenter");

         var timeDown=document.getElementById("timeDown");

         var timer=null;

         var end=false;

         delay=1000;

         start.onclick=function(){

              var curFn=arguments.callee;
              var timeUp_input=timeUp.getElementsByTagName("input");
              var timeDown_span=timeDown.getElementsByTagName("span");
              var timeCenter_span= timeCenter.getElementsByTagName("span")[0];
              var year=timeUp_input[0].value  || 2018;
              var month=timeUp_input[1].value || 12;
              var day=timeUp_input[2].value   || 22;

              timeCenter_span.innerHTML=year+""+month+""+day+"";


                  var willTime=new Date(year,month-1,day,0,0,0);
         
                  //var months=[12,1,2,3,4,5,6,7,8,9,10,11];
               
               timer=setTimeout(function(){
                  

                  var curTime=new Date();

                  if(curTime>=willTime || willTime<=curTime ){
                    
                     alert("活动时间已经结束!!!");

                       for(var i=0,len=timeDown_span.length;i<len;i++){
                             
                           timeDown_span[i].innerHTML="000";
                               
                         }

                     end=true;

                 

                     clearTimeout(timer);

                     return;
  
                  }
              

               

                  var milliseconds=willTime.getTime()-curTime.getTime();

                  var days=milliseconds/1000/3600/24;   //天数

                  var hours=milliseconds/1000/3600%24;  //剩余的小时

                  var minute=milliseconds/1000/60%60;   //剩余分钟数

                  var seconds=milliseconds/1000%60;  //剩余秒数

                   //总结  XXX%什么 剩下的还是XXX
                   //所以 就需要 分钟%60 剩下的才是分钟


                     timeDown_span[0].innerHTML=addZero(days);
                     timeDown_span[1].innerHTML=addZero(hours);
                     timeDown_span[2].innerHTML=addZero(minute);
                     timeDown_span[3].innerHTML=addZero(seconds);

                      
                   if(!end){

                         
                      timer=setTimeout(arguments.callee,delay);

                       
                   }

                   else{
                      
                        for(var i=0,len=timeDown_span.length;i<len;i++){
                             
                           timeDown_span[i].innerHTML="000";
                               
                         }
                         end=false;



                   }


                     
                     
                 });

           };



        function addZero(num){

           num=parseInt(num);
             if(num<100 && num>=10){

                 return "0"+num;
             }

            else if(num<10){
              
              return "00"+num;

            }

            else{
              
              return num;

            }


         }



          
     </script>
</body>
</html>

技术分享图片

 不断的调用setTimeout 让时间显示为最先时间

当输入的时间比当前时间小的时候  或者 当前时间比输入时间大的时候 都会不再运行setTimeout了

以上是关于怎么让链式调用setTimeout停止的主要内容,如果未能解决你的问题,请参考以下文章

promise链式调用

js中怎么让程序暂停一段时间

在给定时间后停止HTML5 Javascript动画

setTimeout

0179 定时器 之 setTimeout() :开启定时器,5秒后关闭广告案例,停止定时器

如何让 JS onkeyup事件停止一定事件后执行某个操作