Question

所以我现在已经工作了好几个小时了，我已经阅读了一堆StackOverflow帖子，我仍然没有运气。

我有一个页面有2个部分，具体取决于数据库中的int将取决于哪个部分在哪个时间显示。

我的目标是让页面查看数据库状态是否已从当前状态更改，然后是否已刷新页面，如果没有，则不执行任何操作，只需每10秒重新运行一次。

我在页面顶部运行PHP，从数据库中获取int

 $online_status = Online_status::find_by_id(1);

然后我使用HTML将状态加载到jquery可以访问的内容

 <input type="hidden" id="statusID" value="<?php echo $online_status->status; ?>">
<span id="result"></span>

所以在我的页面底部，我添加了一些jquery和ajax

   $(document).ready(function(){
     $(function liveCheck(){
       var search = $('#statusID').val();
       $.ajax({
         url:'check_live.php',
         data:{search:search},
         type:'POST',
         success:function(data){
           if(!data.error){
             $newResult = $('#result').html(data);
             window.setInterval(function(){
               liveCheck();
              }, 10000); 
           }
        }
     });
   });
 liveCheck();
 });

然后转到另一个运行以下代码的PHP页面

 if(isset($_POST['search'])){
    $current_status = $_POST['search'];
    $online_status = Online_status::find_by_id(1);
    if($current_status != $online_status->status){
       echo "<script>location.reload()&semi;</script>";
    }else{
    }
  }

然后jquery加载到HTML部分，其id为“result”，如前所示。我知道这是一个非常糟糕的方法，因此，它会在开始时工作，但是你把它留在页面上的时间越长，页面越慢，直到它冻结。

如果有人能指出我正确的方法，我将非常感激。谢谢!!

Answer 1

您的页面速度变慢，因为每次调用liveCheck函数时都会创建一个新的时间间隔。随着时间的推移，您有许多间隔在运行并同时向PHP文件发送请求。您可以通过在浏览器中打开开发人员控制台并监控“网络”选项卡来验证此行为。

您应该做的是将间隔设置一次，并在该间隔内执行$.ajax调用。此外，如果当前请求处于挂起状态，通过实现boolean状态变量（在请求处于挂起状态时为true，而在请求完成时为false），则不会发送新请求，这是一种很好的做法。

看起来您的函数的预期行为是在$online_status->status更改时重新加载页面，这是正确的吗？如果是这样，请将您的PHP更改为只回显true或1（真的是任何东西）并将您的JS重写为：

function liveCheck() {
    if (liveCheckPending == true)
        return;
    liveCheckPending = true;
    var search = $('#statusID').val();
    $.ajax({
         url:'check_live.php',
         data:{search:search},
         type:'POST'
     }).done(function(data){
         if (!data.error)
            location.reload();
     }).always(function(data){
         liveCheckPending = false;
     });
}

var liveCheckPending = false;
setInterval(liveCheck, 10000);

Answer 2

js：

(function(){
    function liveCheck(){
        var search = $('#statusID').val();
        $.ajax({
            url:'check_live.php',
            data:{search:search},
            type:'POST',
            success:function(data){
            if(data.trim() == ''){
                location.reload();
            }else{
                $('#result').html(data);
                window.setTimeout(function(){
                    liveCheck();
                }, 10000); 
            }
            }
        });
    }

    $(function(){
        liveCheck();
    });
})(jQuery)

PHP：

<?php
if(isset($_POST['search'])){
    $current_status = $_POST['search'];
    $online_status = Online_status::find_by_id(1);
    if($current_status != $online_status->status){
    $data = '';
    }else{
        $data = 'some html';
    }
    echo $data;
}

使用ajax从php获取结果并重新加载页面

2 个答案: