如何让ajax调用只执行一次功能？

我每隔60秒刷新一次页面，将新的状态添加到我的div中。然而，在订单下达后，我有一个 “等待 “状态。我不希望在管理员改变状态之前，每隔60秒就将相同的状态添加到我的div中。我该如何实现呢？另外，如果我在一段时间后打开页面，是否可以有附加的状态？例如，如果status=’Preparation’，我希望每当我打开页面时，就会出现’Waiting’，’Confirmed’。谢谢你

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

在我的action.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>";


     }

}

解决方案：

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>

本文来自投稿，不代表运维实战侠立场，如若转载，请注明出处：https://www.shizhanxia.com/3355.html