使用javascript在同一页面中运行多个计时器

Question

以下代码打印了许多卡片的标题及其倒计时时间.....问题是计时器仅针对第一张卡片打印。我如何打印所有卡片？我已经尝试了很多在谷歌搜索它但可以找到相关的答案。请帮助我如何在每张卡片上安排计时器。

function previewall()
{
$.ajax({
type: "POST",
data: {
},
url: "readall.php",
dataType: "json",
 success: function(JSONObject) {
  var peopleHTML = "";
  for (var key in JSONObject) {
    if (JSONObject.hasOwnProperty(key)) {       
        peopleHTML += "<div class='wrapper'><label>" + JSONObject[key]["title"] + "</label><br>";
        peopleHTML += "<p id='demo1'></p><br><p id=demo></p> </div>";
 var x = setInterval(function() {
      var count =JSONObject[key]["valid_date"];
    var dat=JSONObject[key]["started_date"];
    var countDownDate = new Date(count).getTime();
    var date = new Date(dat).getTime();

// Get todays date and time
var now = new Date().getTime();
var elapsed = now - date;
var distance = countDownDate - now;
var planned= date - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

var days1 = Math.floor(elapsed / (1000 * 60 * 60 * 24));
var hours1 = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes1 = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
var seconds1 = Math.floor((elapsed % (1000 * 60)) / 1000);

var days2 = Math.floor(planned / (1000 * 60 * 60 * 24));
var hours2 = Math.floor((planned % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes2 = Math.floor((planned % (1000 * 60 * 60)) / (1000 * 60));
var seconds2 = Math.floor((planned % (1000 * 60)) / 1000);    

if (distance < 0) {
    document.getElementById("demo").innerHTML = "EXPIRED";
}
else if(elapsed<0){     
        document.getElementById("demo1").innerHTML = "Starts in " + days2 + "d " + hours2 + "h " + minutes2 + "m " + seconds2 + "s " ;  
}
else
{
     document.getElementById("demo1").innerHTML = "Posted <br>" + days1 + "d " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ago" ;

     document.getElementById("demo").innerHTML = days + "d " + hours + "h "  + minutes + "m " + seconds + "s Left" ;
}
    });
    }
  }
 $("#people").html(peopleHTML);
 }
 });
 }  

Answer 1

问题是所有计时器绑定变量key，因此当它们触发时，它们会看到key的最终值。

请改为尝试：

for (var k in JSONObject) {
   let key = k;
   if (JSONObject.hasOwnProperty(key)) {
     ...

Answer 2

您有多个元素共享相同的id（即演示，演示1），结果页面已损坏，这就是问题的原因。

最快的解决方法是保留一个计数器并将其嵌入到您创建的元素的各种id中。

类似的东西：

var peopleHTML = "";
var i = -1;
for (var key in JSONObject) {
i++;
if (JSONObject.hasOwnProperty(key)) {       
    peopleHTML += "<div class='wrapper'><label>" + JSONObject[key]["title"] + "</label><br>";
    peopleHTML += "<p id='demoOuter'"+i+"></p><br><p id=demoInner"+i+"></p> </div>";

// [CUT]

f (distance < 0) {
    document.getElementById("demoInner"+i).innerHTML = "EXPIRED";
}
else if(elapsed<0){     
        document.getElementById("demoOuter"+i).innerHTML = "Starts in " + days2 + "d " + hours2 + "h " + minutes2 + "m " + seconds2 + "s " ;  
}
else
{
     document.getElementById("demoOuter"+i).innerHTML = "Posted <br>" + days1 + "d " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ago" ;

     document.getElementById("demoInner"+i).innerHTML = days + "d " + hours + "h "  + minutes + "m " + seconds + "s Left" ;
}