使用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（即演示，demo1的），所产生的页面被打破，这是问题的原因。

最快的修复方法是保留一个计数器并将其嵌入到您创建的元素的各种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" ; 
}