對於不同段落不起作用的Js setInterval

Question

我想爲每個段落運行不同的計時器。但不幸的是，它根據最後一段有效。該函數應該爲每個段落分別運行。這裏是我的代碼

$(".set_timer").each(function() { 
 
    setTimer($(this).data("created_time"), $(this)); 
 
}); 
 

 
function setTimer(dateStart, ele) { 
 
    countDownDate = new Date(dateStart).getTime(); 
 

 
    x = setInterval(function() { 
 
    // Get todays date and time 
 
    now = new Date().getTime(); 
 
    // Find the distance between now an the count down date 
 
    distance = countDownDate - now; 
 
    // Time calculations for days, hours, minutes and seconds 
 
    days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
 
    hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
 
    minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
    seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 
    // Output the result in an element with id="demo" 
 
    ele.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); 
 
    // If the count down is over, write some text 
 
    if (distance < 0) { 
 
     clearInterval(x); 
 
     ele.html("TIMER COMPLETED"); 
 
    } 
 
    }, 1000); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<p class="set_timer" data-created_time="May 12, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="May 10, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="May 08, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="Apr 10, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="Jun 15, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="Jul 13, 2018 11:56:30"></p>

電流輸出：

459d 1H15米25S

459d 1H15米25S

459d 1H15米25S

459d 1H 15m 25s

459d 1H15米25S

應該根據created_time data屬性

Answer 1

只需添加一個var到countDownDate = new Date(dateStart).getTime();

所以這將是

var countDownDate = new Date(dateStart).getTime(); 
. 
. 
. 

Answer 2

其預期的那樣所有變量都在全球範圍內定義是不同的。然後在本地範圍內定義。

$(".set_timer").each(function() { 
 
    setTimer($(this).data("created_time"), $(this)); 
 
}); 
 

 
function setTimer(dateStart, ele) { 
 
    let countDownDate = new Date(dateStart).getTime(); 
 
    let x = setInterval(function() { 
 
    // Get todays date and time 
 
    let now = new Date().getTime(); 
 
    // Find the distance between now an the count down date 
 
    let distance = countDownDate - now; 
 
    // Time calculations for days, hours, minutes and seconds 
 
    let days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
 
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
 
    let minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
    let seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 
    // Output the result in an element with id="demo" 
 
    ele.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); 
 
    // If the count down is over, write some text 
 
    if (distance < 0) { 
 
     clearInterval(x); 
 
     ele.html("TIMER COMPLETED"); 
 
    } 
 
    }, 1000); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
<p class="set_timer" data-created_time="May 12, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="May 10, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="May 08, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="Apr 10, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="Jun 15, 2018 11:56:30"></p> 
 
<p class="set_timer" data-created_time="Jul 13, 2018 11:56:30"></p>

Answer 3

function setTimer(dateStart, ele) { 
    countDownDate = new Date(dateStart).getTime(); 
    x = setInterval((function (countDownDate) { 
      // Get todays date and time 
      return function(){ 
       now = new Date().getTime(); 
       // Find the distance between now an the count down date 
       distance = countDownDate - now; 
       // Time calculations for days, hours, minutes and seconds 
       days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
       hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
       minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
       seconds = Math.floor((distance % (1000 * 60))/1000); 

       // Output the result in an element with id="demo" 
       ele.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); 
       // If the count down is over, write some text 
       if (distance < 0) { 
        clearInterval(x); 
        ele.html("TIMER COMPLETED"); 
       } 
      } 
     })(countDownDate), 1000);