AJAX的setInterval錯誤

敬請點擊此處查看樣本此鏈接：My test code AJAX的setInterval錯誤

這將在一個div被用來在我的實際網站，並有同樣的問題。正如你可以看到每2秒鐘的div閃爍或在我的測試代碼網站整個頁面，然後當你向下滾動它會自動向上滾動同一時間。顯然它是由setInterval引起的。

而且我得到的控制檯錯誤：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/ .

有什麼辦法改善嗎？

此外，還有其他方法來顯示更新列表從數據庫與ui在每一秒？

這裏是我的代碼：

<div id="container"></div> 
<script> 
    function refreshNews() 
    { $.get('../php/ajaxreportall.php').success(function(data){ 
      $("#container").html(data); 
     }) 
    } 
    refreshNews(); 
    setInterval(refreshNews, 2000); 
</script>

腳本文件

<?php 
    require("database.php"); 

    $sql = "SELECT * from Report r inner join reddb.User_Info u 
      on u.user_email = r.user_email "; 

    $res = odbc_exec($conn,$sql); 

    echo " 
      <link rel='stylesheet' type='text/css' href='../css/homelayout.css'> 
      <script src='../js/home.js'></script> 
     "; 

    while($feedItem = odbc_fetch_array($res)) 
    { 
     echo " 
      <div class='feedItem'> 
       <div>Report No. <label class='feedItemRepID'>" . $feedItem['report_id'] . "</label></div> 
       <div>Name: <label>" . $feedItem['firstname'] . "</label></div> 
       <div>Contact No: <label>" . $feedItem['contact'] . "</label></div> 
       <div>Details: <label>" . $feedItem['report_detail'] . "</label></div> 
       <div>Date: <label>" . $feedItem['date_report'] . "</label></div> 
       <div class='buttons'> 
        <button class='btn btn-success btnRespond' data-toggle='modal' data-target='#myModal'>Respond</button> 
       </div> 
      </div> 
      "; 

    } 

?>

來源

2016-01-17 Jai

如果您要在每個內部重寫整個頁面的HTML（或大部分），那麼它只會看起來很醜陋，並且會閃爍並滾動。您可以通過保存滾動位置，添加新內容，然後設置回滾來保留滾動位置，但醜陋的閃光燈可能不會消失。顯示更新的更好的方法是隻從您的網站獲取JSON數據，僅處理已更改的數據，然後僅將這些更改應用於屏幕。或者使用JSON獲取所有數據並僅更新數據值。重寫整個頁面的HTML總是會看起來很醜。 – jfriend00

這就是我也在想的，因爲腳本是創建html內容的人，每次只是刷新頁面，這就是爲什麼它眨眼LOL – Jai

看看我的更新的答案爲較少侵入版本。 – mplungjan

這是不使用間隔阿賈克斯是個好主意。而是改成這樣：

function refreshNews() { 
    $.get('../php/ajaxreportall.php').success(function(data){ 
    $("#container").html(data); 
    setTimeout(refreshNews, 2000); 
    }); 
} 
$(function() { 
    refreshNews(); 
});

或測試，如果數據發生變化：

var rfn=""; 
function refreshNews() { 
    $.get('../php/ajaxreportall.php').success(function(data){ 
    if (rfn!=data) { 
     $("#container").fadeOut(function() { 
     $("#container").html(data); 
     $("#container").fadeIn(); 
     }); 
     rfn=data; 
    } 
    setTimeout(refreshNews, 2000); 
    }); 
} 
$(function() { 
    refreshNews(); 
});

如果你想在上面從來沒有停止，甚至失敗的時候，使用。總是

function refreshNews() { 
    var jqxhr = $.ajax('../php/ajaxreportall.php') 
    .done(function(data){ 
    if (rfn!=data) { 
     $("#container").fadeOut(function() { 
     $("#container").html(data); 
     $("#container").fadeIn(); 
     }); 
     rfn=data; 
    } 
    }) 
    .fail(function() { 
    console.log("error"); 
    }) 
    .always(function() { 
    setTimeout(refreshNews, 2000); 
    }); 
}

來源

2016-01-17 07:20:41 mplungjan

第二個工作：bd非常感謝你！有沒有更清潔的方式？我在想，如果PHP腳本只會產生JSON，然後將通過AJAX生成HTML內容...是否正確和更清潔？ – Jai

這是正確和清潔。總是更好的只傳輸數據 – mplungjan

而我測試出來接收新的報告，並沒有影響任何問題......但我沒有測試過，如果報告沒有了......還是謝謝你！ – Jai

那錯誤指出您嘗試進行已棄用的同步調用，您可能在代碼中使用了類似的內容：

$.ajaxSetup({ 
    async: false 
});

將其刪除或將其更改爲true以刪除此錯誤消息。

關於滾動和閃爍問題：
用於刷新您的新聞內容，您正在刷新完整的HTML，因此您的完整HTML會一次又一次地加載。想這樣：你在爬梯子，突然間梯子消失了，又出現了一個新梯子？你會怎麼樣？你會回到起點，即地面，撓撓你的腦袋，發生了什麼？
滾動發生同樣的事情，用戶滾動瀏覽新聞內容，並突然重新加載，用戶又回到起點。

爲了解決這個問題，你必須重構所有的東西，你必須在列表中添加新消息，並且必須存儲一些標識符來識別你的最後一篇文章，你會發送這個標識符到服務器，然後你的服務器會發送只有那些比這個帖子更新的數據，並且還會向最新的帖子發送一個標識符作爲迴應。

來源

2016-01-17 07:26:13 Sachin

我的代碼中沒有這樣的東西。是不是默認值是真的？ – Jai

yes默認爲true，但錯誤消息另有說明。 – Sachin

但我真的沒有那個代碼，但...如何強制它爲真否則？ – Jai

AJAX的setInterval錯誤

回答

相關問題