循环套定时器——定时器套循环
最近再改一个项目，里面有个倒计时。类似于商品的秒杀，每个商品都会有一个倒计时，都要显示在页面上。当倒计时结束的时候，商品显示已下架。这个功能是非常简单的，但是不知道为什么项目会出现时间没办法获取到，导致了，所有的倒计时都显示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 }
这里运行代码就会发现出了下图的情况：
为什么会出现这种原因呢。其实就是循环的进行是一瞬间完成的，但是计时器却不是这样的，他是一步步的执行的。
这样就导致了，我们的定时器还没有启动，但是循环已经做完了，导致了咱们显示的都是错误的。
然后就写了一个定时器，在加载完成之后再进行倒计时循环，参加下面的代码：
<!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
