Как сделать так, чтобы вызов ajax выполнял функцию только один раз?

Question

По сути, я выполняю отслеживание состояния продуктов питания для заказа на основе orderNo. Я обновляю sh страницу каждые 60 секунд, чтобы добавить новый статус в мой div. Однако для начала размещения заказа у меня есть статус «ожидания». Я не хочу, чтобы один и тот же статус добавлялся в мой div каждые 60 с до того, как администратор изменит его. Как мне этого добиться? Кроме того, возможно ли иметь добавленные статусы, если я открою страницу через некоторое время? Например, если статус = «Подготовка», я хочу, чтобы при открытии страницы появлялись «Ожидание», «Подтверждение». Спасибо

<script>
jQuery($ => {
  var orderNo = "<?php echo $orderNo; ?>";

  function getData() {
    $.ajax({
      url: 'action.php',
      method: 'post',
      data: {
        orderNo: orderNo
      },
      success: function(response) {
        $("#progressbar").append(response);
        setTimeout(getData, 60000); // repeat in 60 secs, if AJAX was successful
      }
    });
  }

  getData(); // on load
 });

</script>

В моих действиях. php файл

//ORDER PROGRESS
if (isset($_POST['orderNo']))
{


    $orderNo=$_POST['orderNo'];

    $orderSt="SELECT O_Status from orders WHERE O_No='$orderNo'";

    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $orderRes=$conn->query($orderSt);

     $orderRow=$orderRes->fetch(PDO::FETCH_ASSOC);
     $orderStatus=$orderRow['O_Status'];


     if ($orderStatus=='Waiting')
     {
        echo "<div style='height:200px; width:200px; text-align: center'>
                <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                  <h6>WAITING FOR CONFIRMATION</h6>
              </div>";


     }

}

Answer 1

let status = '<li>PENDING</li>';

var updateStatus = function(){
  $('#status').html('');
  $('#status').append(status);
  setTimeout(updateStatus,6000);
}

updateStatus();

$(document).on('click','#changeStatus',function(){
status = '<li>ACCEPTED</li><li>PENDING</li>';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="status">
</ul>

<button type="button" id="changeStatus">Mark as ACCEPTED</button>

Если вы каждый раз обновляете одну и ту же ячейку, это то, что вы можете сделать:

    // your existing code here
        $orderStatus=$orderRow['O_Status'];
        switch($orderStatus){
          case 'waiting':
             $response = '<div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>WAITING FOR CONFIRMATION</h6>
                  </div>';
             break;

          case 'confirmed':
             $response = '<div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>WAITING FOR CONFIRMATION</h6>
                  </div>
                  <div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>CONFIRMED</h6>
                  </div>';
             break;
          case 'preparation':
             $response = '<div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>Preparing</h6>
                  </div>
    <div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>CONFIRMED</h6>
                  </div>
    <div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>WAITING FOR CONFIRMATION</h6>
                  </div>'
                break;
           default:
            $response = '<div style='height:200px; width:200px; text-align: center'>
                <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                  <h6>WAITING FOR CONFIRMATION</h6>
              </div>'
            break;
}
return $response;

Вы можете очистить кодировать так, как вы хотите, идея состоит в том, чтобы очистить div и добавить все данные.

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