僅刷新HTML div，而不會使頁面變慢

Question

我有這個問題：單擊一個按鈕，由於ajax，我運行了一個php腳本。 但是在同一時間，我想在同一頁面中重新加載/刷新html div。 因此，當我使用以下功能時：7`

setInterval(function() {
$("#IdDiv").load(location.href+" #IdDiv>*","");
}, 500);

`頁面運行非常慢，我是因為重新加載循環運行，希望知道原因。 刷新必須在后台進行。 您知道解決方案嗎？ 謝謝

Answer 1

那不是您從ajax調用中檢索數據的方式。 使用ajax將數據發送到您的php文件，在php中從db獲取對象形式的數據，然后以json格式打印或退出此對象：

file.php：

// some logic here
exit json_encode($dataFromDB);

$ dataFromDB將是您的ajax響應對象。 這是一個如何使用它（與jQuery一起使用）的示例。

$.post("file.php", {data}, function(response) {
    // response object contains the data for you to append to webpage
    $("#myDiv").val(reponse.value);
}, "json");

順便說一句。 setInterval連續運行，setTimeout僅運行一次。

Answer 2

刷新必須在后台

似乎正在使用setInterval ，因為它認為$ .load是同步的，而不是同步的。

$ .load是A syncronous

使用以下代碼：

$('<div/>').load('/', function() { console.log('second'); }); 
console.log('first');

結果是：

第一

第二

在服務器響應之前，在執行加載調用之后立即執行的代碼。 因此，要實現在后台更新div- 只需正常調用即可：

$("#IdDiv").load(url);

setInterval和setTimeout

讓我們看一下何時使用setInterval和setTimeout （因為setTimeout可能是問題代碼所期望的，並且setInterval被錯誤地使用了）。

何時使用setTimeout

使用setTimeout在將來的特定時間（雖然近似）執行一次操作：

setTimeout(function() {
    // code to be executed exactly once, one second from now
}, 1000);

何時使用setInterval

使用setInterval在以后重復做某事

now = new Date();
seconds = $('#seconds');

setInterval(function() {
    seconds.html(now.getSeconds());
}, 1000);

警惕放置setInterval調用任何可變持續時間的內容，或者在正常情況下可能會延遲的內容-否則，存在問題所描述的相同症狀的風險，從而使回調最終並行運行，從而可能導致瀏覽器崩潰。

何時使用setTimeout作為偽間隔

在setTimout和setInterval兩種方法setTimout存在一種情況。 當有需要的東西在不活動的插圖中連續調用計時器的循環中運行。

考慮以下：

url = '/whatever';
function loopForever() {
    $("#IdDiv").load(url, function() {
        setTimeout(loopForever, 1000);
    });
}

此代碼將加載url，然后從完成時加載一秒鍾-再次加載（再次調用命名函數）。 以這種方式使用setTimeout避免了並行執行回調的問題，因為僅計划在上一次完成時才開始下一次迭代。