循环套定时器——定时器套循环

　　最近再改一个项目，里面有个倒计时。类似于商品的秒杀，每个商品都会有一个倒计时，都要显示在页面上。当倒计时结束的时候，商品显示已下架。这个功能是非常简单的，但是不知道为什么项目会出现时间没办法获取到，导致了，所有的倒计时都显示underfind。下面是我自己仿照原来程序的代码：（这段代码是错误的）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>循环套定时器——定时器套循环</title>
 6     </head>
 7     <body>
 8         <ul id="list">
 9             <!--<li>
10                 <p>到</p>
11                 <span></span>
12                 <p>还剩</p>
13                 <b></b>
14             </li>-->
15         </ul>
16     </body>
17     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
18     <script type="text/javascript">
19         $.ajax({
20             type: "get",
21             url: "./time.json",
22             async: true,
23             success: function(data) {
24                 console.log(data);
25                 $.each(data.time, function(k, item) {
26                     console.log(item);
27                     $("#list").append("<li>" + "<span>到</span>" + "<span>" + time1(item.endtime) + "</span>" + "<span> 还剩 </span>" + "<b>" + time2(item.endtime) + "</b>" + "</li>")
28                 });
29             }
30         });
31 
32         function time1(time) {
33             //console.log(time);
34             var timecenter = new Date(time);
35             var year = timecenter.getFullYear();
36             var month = timecenter.getMonth() + 1;
37             var date1 = timecenter.getDate();
38             var hour = timecenter.getHours();
39             var min = timecenter.getMinutes();
40             var sec = timecenter.getSeconds();
41             return checkTime(year) + "-" + checkTime(month) + "-" + checkTime(date1) + " " + checkTime(hour) + ":" + checkTime(min) + ":" + checkTime(sec);
42         }
43 
44         function time2(time) {
45             //console.log(time);
46             setInterval(function() {
47                 var now_time = new Date().getTime();
48                 var bet_time = time - now_time;
49                 if(bet_time <= 0) {
50                     return "结束了！"
51                 } else {
52                     var dd = parseInt(bet_time / 60 / 60 / 24, 10); //计算剩余的天数
53                     var hh = parseInt(bet_time / 60 / 60 % 24, 10); //计算剩余的小时数
54                     var mm = parseInt(bet_time / 60 % 60, 10); //计算剩余的分钟数
55                     var ss = parseInt(bet_time % 60, 10); //计算剩余的秒数
56                     hh = checkTime(hh);
57                     mm = checkTime(mm);
58                     ss = checkTime(ss);
59                     msg = "距离结束" + dd + "天 " + hh + ":" + mm + ":" + ss;
60                     //$(".psss").eq(index).html('<span class="spans1">' + supportNum + '</span><em class="ems1">' + targetAmount + '</em><i class="is">' + msg + '</i>');
61                     return msg;
62                 }
63             }, 1000)
64         }
65         function checkTime(i) {
66             if(i < 10) {
67                 i = "0" + i;
68             }
69             return i;
70         }
71     </script>
72 </html>

这里面的time.json是为了模仿ajax从后台加载数据！为了大家方便也把这个小json也写在下面了。

 1 {
 2     "time": [
 3         {
 4             "endtime": 1514995200000
 5         }, {
 6             "endtime": 1515045600000
 7         }, {
 8             "endtime": 1515045660000
 9         }
10     ]
11 }

time.json

这里运行代码就会发现出了下图的情况：

循环套定时器——定时器套循环

　　为什么会出现这种原因呢。其实就是循环的进行是一瞬间完成的，但是计时器却不是这样的，他是一步步的执行的。

这样就导致了，我们的定时器还没有启动，但是循环已经做完了，导致了咱们显示的都是错误的。

然后就写了一个定时器，在加载完成之后再进行倒计时循环，参加下面的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>循环套定时器——定时器套循环</title>
    </head>
    <body>
        <ul id="list">
            <!--<li>
                <p>到</p>
                <span></span>
                <p>还剩</p>
                <b></b>
            </li>-->
        </ul>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "get",
            url: "./time.json",
            async: true,
            success: function(data) {
                ////console.log(data);
                $.each(data.time, function(k, item) {
                    //console.log(item);
                    $("#list").append("<li>" + "<span>到</span>" + "<span>" + time1(item.endtime) + "</span>" + "<span> 还剩 </span>" + "<b>" + time2(item.endtime) + "</b>" + "</li>")
                });
                set_Inter_val1(time_arr);
            }
        });

        function time1(time) {
            ////console.log(time);
            var timecenter = new Date(time);
            var year = timecenter.getFullYear();
            var month = timecenter.getMonth() + 1;
            var date1 = timecenter.getDate();
            var hour = timecenter.getHours();
            var min = timecenter.getMinutes();
            var sec = timecenter.getSeconds();
            return checkTime(year) + "-" + checkTime(month) + "-" + checkTime(date1) + " " + checkTime(hour) + ":" + checkTime(min) + ":" + checkTime(sec);
        }
        var time_arr = [];
        function time2(time) {
            //console.log(time);
            time_arr.push(time);
            //console.log(time_arr);
            //setInterval(function() {
                var now_time = new Date().getTime();
                var bet_time = time - now_time;
                if(bet_time <= 0) {
                    return "结束了！"
                } else {
                    var dd = parseInt(bet_time/1000 / 60 / 60 / 24, 10); //计算剩余的天数
                    var hh = parseInt(bet_time/1000 / 60 / 60 % 24, 10); //计算剩余的小时数
                    var mm = parseInt(bet_time/1000 / 60 % 60, 10); //计算剩余的分钟数
                    var ss = parseInt(bet_time/1000 % 60, 10); //计算剩余的秒数
                    hh = checkTime(hh);
                    mm = checkTime(mm);
                    ss = checkTime(ss);
                    msg = "距离结束" + dd + "天 " + hh + ":" + mm + ":" + ss;
                    //$(".psss").eq(index).html('<span class="spans1">' + supportNum + '</span><em class="ems1">' + targetAmount + '</em><i class="is">' + msg + '</i>');
                    return msg;
                }
            //}, 1000)
            //clearInterval(time);
            
        }
        var time = ''
        function set_Inter_val1(time_arr){
             time = setInterval(function(){
                for(var i=0;i<time_arr.length;i++){
                    var now_time = new Date().getTime();
                    var bet_time = time_arr[i] - now_time;
                    if(bet_time <= 0) {
                        $("li").eq(i).find('b').html('结束了');
                    } else {
                        var dd = parseInt(bet_time/1000 / 60 / 60 / 24, 10); //计算剩余的天数
                        var hh = parseInt(bet_time/1000 / 60 / 60 % 24, 10); //计算剩余的小时数
                        var mm = parseInt(bet_time/1000 / 60 % 60, 10); //计算剩余的分钟数
                        var ss = parseInt(bet_time/1000 % 60, 10); //计算剩余的秒数
                        hh = checkTime(hh);
                        mm = checkTime(mm);
                        ss = checkTime(ss);
                        msg = "距离结束" + dd + "天 " + hh + ":" + mm + ":" + ss;
                        $("li").eq(i).find('b').html(msg);
                        console.log(msg);
                    }
                }
            },1000)
        }
        function checkTime(i) {
            if(i < 10) {
                i = "0" + i;
            }
            return i;
        }
    </script>
</html>

这样，等待加载完成之后，然后启动了定时器，定时器中有循环算时间，然后赋值。

最后给大家推荐一篇文章我觉得写的不错的文章：https://www.cnblogs.com/hyea/p/5596079.html

秒客网

循环套定时器——定时器套循环

相关文章