Js setInterval不同段落不起作用

Question

I want to run a different timer for each paragraph. But unfortunatly it works according to the last paragraph. The function should run separatly for each paragraph. Here is my code

 $(".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> 

Current Output:

459d 1h 15m 25s

459d 1h 15m 25s

459d 1h 15m 25s

459d 1h 15m 25s

459d 1h 15m 25s

It should be different according to the created_time data attribute

Answer 1

Its expected as all variables are defined in global scope. Define then in local scope.

 $(".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 2

Just add a var to countDownDate = new Date(dateStart).getTime();

so it will be

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

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