Jquery countdown timer with php not performing as expected

Question

I am working on a jquery/php countdown timer and the output is not as expected

Here is the below code

".$expires_by_cleaned_new."

Picking up the innerhtml contents of a p tag and running it in a loop to display the count down timer for each element in jquery

var x = setInterval(function() { 
$('.FeedExpire').each(function () { 
   alert(document.querySelector('#'+this.id).innerHTML);    
   var deadline = new Date(document.querySelector('#'+this.id).innerHTML).getTime();
});

But not getting the result as expected .i get the expected results and it changes in instant(Screenshots attached below )

Complete code below

Expected result

Error

$( document ).ready(function() {            
   $.ajax({
       type: "POST",
       url: "http://192.168.1.11/Retrivedataforhomefeed.php",
       //data: {email:email,userId:userId,displayName:displayName,givenName:givenName,},
       cache: false,
       success: function(data) {
           var results=data;
           document.querySelector('.Homefeedstart').innerHTML = results;
           //alert(document.getElementsById('DBPostExpireBy-1').innerHTML);

           var x = setInterval(function() { 
               $('.FeedExpire').each(function () { 
                   alert(document.querySelector('#'+this.id).innerHTML);   
                   var deadline = new Date(document.querySelector('#'+this.id).innerHTML).getTime();
                   var now = new Date().getTime(); 
                   var t = deadline - now; 
                   var days = Math.floor(t / (1000 * 60 * 60 * 24)); 
                   var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
                   var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); 
                   var seconds = Math.floor((t % (1000 * 60)) / 1000); 
                   document.getElementById(this.id).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; 
                   if (t < 0) { 
                       clearInterval(x); 
                       document.getElementById(this.id).innerHTML = "EXPIRED"; 
                   } 
               });
           }, 1000); 
           //});
           //var FeedDatareturned=$(".FeedExpire").attr('id');
           //alert(FeedDatareturned); 
       }
   });
});

prepare("SELECT * FROM user_posted_data");
    $sql->execute();
    $row = $sql->fetchAll(PDO::FETCH_ASSOC);
    $terms = array();
    foreach($row as $output) {
        $id=$output['Id'];
        $user_comment = $output['User_comment'];
        $expires_by =$output['Post_expires_by'];
        $expires_by_cleaned = substr($expires_by, 3);
        $expires_by_cleaned_new= substr($expires_by_cleaned, 0, strpos($expires_by_cleaned, 'GMT'));
        $Posted_by = $output['Posted_by'];
        echo"
            
                  
                
                ".$Posted_by."
 Within:100 meters
            ".$user_comment."
            lend a hand by:
".$expires_by_cleaned_new."
Discuss";
    }

?>

Not sure where i am going wrong please advise

Console.log(deadline) screenshot below

console.log(deadline)

mplungjan · Accepted Answer

Have a look at this. No need to change the PHP, assuming the timestamp is in milliseconds You need to convert the timestamp to an INT

You do NOT want to clear the interval until ALL timers are expired. You could have a timer per post or just keep it running

success: function(data) {
       var results=data;
       $('.Homefeedstart').html(results);
       startTimers():

add this elsewhere in the script outside the ajax

const pad = num => ("0" + num).slice(-2)
const aSecond = 1000;
const aMinute = aSecond * 60
const anHour = aMinute * 60;
const aDay = anHour * 24;
let x;

function startTimers() {
  clearInterval(x)
  x = setInterval(function() {
    $('.DBPostExpireBy').each(function() {
      let deadline = new Date(+$.trim($(this).text())).getTime();
      let now = new Date().getTime();
      let t = deadline - now;
      let days = Math.floor(t / aDay);
      let hours = Math.floor((t % (aDay)) / (anHour));
      let minutes = Math.floor((t % (anHour)) / (aMinute));
      let seconds = Math.floor((t % (aMinute)) / aSecond);
      let time = t < 0 ? "Expired" : days + "d " + pad(hours) + "h " + pad(minutes) + "m " + pad(seconds) + "s "
      $(this).next().html(time);
    });
  }, 1000);
}

startTimers(); // MOVE this to inside the success



  
  
  Posted_by A
  Within:100 meters
  User A comment
  lend a hand by:
  1581501796895
  
  Discuss


  
  
  Posted_by A
  Within:100 meters
  User A comment
  lend a hand by:
  1581501896895
  
  Discuss

Jquery countdown timer with php not performing as expected

Answers (2)

Related Questions