Таймер обратного отсчета Jquery с php не работает должным образом

Question

Я работаю над таймером обратного отсчета jquery / php, и вывод не такой, как ожидалось

Вот код ниже

<p id='FeedExpire-".$id."' class='FeedExpire' style='display:inline-block;'>".$expires_by_cleaned_new."</p>

Подбираем содержимое innerhtml тега ap и запускаемэто в цикле, чтобы отобразить таймер обратного отсчета для каждого элемента в jquery

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

Но не получая результат, как ожидалось. Я получаю ожидаемые результаты, и он меняется мгновенно (скриншоты ниже)

Полный код ниже

Ожидаемый результат

Ошибка

$( 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); 
       }
   });
});

<?php
    header('Access-Control-Allow-Headers: X-Requested-With, origin, content-type,');
    header("Access-Control-Allow-Origin: *");
    include("DatabaseConnection.php");
    $sql = $dbh->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"
            <div class='FeedBox' id='FeedBox-".$id."'>
                <img src='img/report.jpg' id='FeedReport-".$id."' alt='Avatar' width='50px' height='50px' style='float:right;'>  
                <img src='img/img_avatar.png' id='FeedImage-".$id."' alt='Avatar' width='50px' height='50px' style='border-radius: 50%;padding-top:10px;padding-left:5px;'>
                <div id='FeedHeader-".$id."' class='FeedHeader'>".$Posted_by."</div> <div id='FeedRadius-".$id."'>Within:100 meters</div>
            <div class='UserComment' id='Data-".$id."'>".$user_comment."</div>
            <div id='HelpExpireText-".$id."' style='display:inline-block;'>lend a hand by:</div><div class='DBPostExpireBy' id='DBPostExpireBy-".$id."' style='display:none;'>".$expires_by_cleaned_new."</div><p id='FeedExpire-".$id."' class='FeedExpire' style='display:inline-block;'></p><div class='ReadMore' id='ReadMore-".$id."' style='display:inline-block;float:right;padding-top:16px;padding-right:5px;' onclick='Nextpage(this);'>Discuss</div></div>";
    }

?>

Не уверен, где я иду не так, пожалуйста, сообщите

Console.log (крайний срок) скриншот ниже

Answer 1

Посмотрите на это. Не нужно менять PHP, предполагая, что временная метка указана в миллисекундах. Вам нужно преобразовать временную метку в INT

. Вы НЕ хотите очищать интервал до истечения срока действия ВСЕХ таймеров. Вы можете иметь таймер для каждого поста или просто оставить его включенным

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

добавить это в другом месте скрипта за пределами 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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='FeedBox' id='FeedBox-1'>
  <img src='img/report.jpg' id='FeedReport-1' alt='Avatar' width='50px' height='50px' style='float:right;'>
  <img src='img/img_avatar.png' id='FeedImage-1' alt='Avatar' width='50px' height='50px' style='border-radius: 50%;padding-top:10px;padding-left:5px;'>
  <div id='FeedHeader1' class='FeedHeader'>Posted_by A</div>
  <div id='FeedRadius-1'>Within:100 meters</div>
  <div class='UserComment' id='Data-1'>User A comment</div>
  <div id='HelpExpireText-1' style='display:inline-block;'>lend a hand by:</div>
  <div class='DBPostExpireBy' id='DBPostExpireBy-1' style='display:none;'>1581501796895</div>
  <p id='FeedExpire-1' class='FeedExpire' style='display:inline-block;'></p>
  <div class='ReadMore' id='ReadMore-1' style='display:inline-block;float:right;padding-top:16px;padding-right:5px;' onclick='Nextpage(this);'>Discuss</div>
</div>
<div class='FeedBox' id='FeedBox-2'>
  <img src='img/report.jpg' id='FeedReport-2' alt='Avatar' width='50px' height='50px' style='float:right;'>
  <img src='img/img_avatar.png' id='FeedImage-2' alt='Avatar' width='50px' height='50px' style='border-radius: 50%;padding-top:10px;padding-left:5px;'>
  <div id='FeedHeader1' class='FeedHeader'>Posted_by A</div>
  <div id='FeedRadius-1'>Within:100 meters</div>
  <div class='UserComment' id='Data-1'>User A comment</div>
  <div id='HelpExpireText-1' style='display:inline-block;'>lend a hand by:</div>
  <div class='DBPostExpireBy' id='DBPostExpireBy-1' style='display:none;'>1581501896895</div>
  <p id='FeedExpire-1' class='FeedExpire' style='display:inline-block;'></p>
  <div class='ReadMore' id='ReadMore-1' style='display:inline-block;float:right;padding-top:16px;padding-right:5px;' onclick='Nextpage(this);'>Discuss</div>
</div>

Answer 2

пожалуйста, убедитесь, что вы получаете все данные правильно с сервера , потому что код работает, когда дата добавляется вручную

// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - 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);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<p id="demo"></p>

попробуйте обновить ваш php следующим образом:

<?php
    header('Access-Control-Allow-Headers: X-Requested-With, origin, content-type,');
    header("Access-Control-Allow-Origin: *");
    include("DatabaseConnection.php");
    $sql = $dbh->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"
            <div class='FeedBox' id='FeedBox-".$id."'>
                <img src='img/report.jpg' id='FeedReport-".$id."' alt='Avatar' width='50px' height='50px' style='float:right;'>  
                <img src='img/img_avatar.png' id='FeedImage-".$id."' alt='Avatar' width='50px' height='50px' style='border-radius: 50%;padding-top:10px;padding-left:5px;'>
                <div id='FeedHeader-".$id."' class='FeedHeader'>".$Posted_by."</div> <div id='FeedRadius-".$id."'>Within:100 meters</div>
            <div class='UserComment' id='Data-".$id."'>".$user_comment."</div>
            <div id='HelpExpireText-".$id."' style='display:inline-block;'>lend a hand by:</div><div class='DBPostExpireBy' id='DBPostExpireBy-".$id."' style='display:none;'>".$expires_by_cleaned_new."</div><p id='".$id."' class='FeedExpire' style='display:inline-block;'></p><div class='ReadMore' id='ReadMore-".$id."' style='display:inline-block;float:right;padding-top:16px;padding-right:5px;' onclick='Nextpage(this);'>Discuss</div></div>";
    }

?>

и ваш крайний срок как:

var deadline = new Date(document.querySelector('#DBPostExpireBy-'+this.id).innerHTML).getTime();