異なる段落のJ 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 1時間15メートル25S

459d 1時間15メートル25S

459d 1時間15メートル25S

459d 1H 15m 25s

459d 1時間15メートル25S

これは、すべての変数はグローバルスコープで定義されているとして期待created_time data属性

Answer 1

だけので、それはすべての変数がグローバルであるときに何が起こるかだ

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);