10から15秒後にajaxで自動更新するとブラウザがハング/クラッシュする

Question

divをajaxで自動更新すると、ブラウザが10〜15秒でハングします。私は何が問題であるか知りません。私がラップトップをチェックインすると、クラッシュやクラッシュが発生し、モバイルでも停止します。

ラップトップでは、ブラウザは応答しません。

コードは以下の通りです：

function ajaxCall() { 
    $.ajax({ 
     url: "cart_checkout.php", 
     success: (function (result) { 
      $("#resultDiv").html(result); 
     }) 
    }) 
}; 
ajaxCall(); 
setInterval(ajaxCall, (1 * 1000)); 

Answer 1

あなたのコードでは、その問題を引き起こす可能性がある2つの潜在的な問題を抱えています。

ここでは、最後の要求が完了したかどうかにかかわらず、AJAX呼び出しをトリガーするので、setIntervalは使用しないでください。各要求の継続時間と読み込み時間は考慮されません。

ポーリングの完全な作業例APIと要素に結果を読み込む：

function poll(element, url, frequency) { 
 
    let timeoutID 
 
    let count = 0 
 
    function _poll() { 
 
    count++ 
 
    $.ajax({ 
 
     url, 
 
     success: ((result) => { 
 
     element.innerHTML = `Response ${count} at ${new Date().toLocaleString()}\n${JSON.stringify(result, null, 2)}` 
 
     if(frequency) 
 
      timeoutID = setTimeout(_poll, frequency) 
 
     }) 
 
    }) 
 
    } 
 
    _poll() 
 
    return() => { 
 
    console.info('cancelling polling') 
 
    clearTimeout(timeoutID) 
 
    } 
 
} 
 

 
$(() => { 
 
    // Start polling every 2 seconds (from time last response was received 
 
    let cancelPolling = poll(document.getElementById('result'), 'https://api.nytimes.com/svc/search/v2/articlesearch.json', 2000) 
 

 
    // Cancel polling in 15 seconds 
 
    setTimeout(cancelPolling, 15000) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<pre id="result" />

---

第二の問題は、結果のdivに直接HTMLを落とすということです同期操作であり、JavaScriptスレッドを結びつけて応答しなくなります。ペイロードが小さい（ページングされた）場合、これは問題ありませんが、大きなペイロードの場合は、ブラウザがハングアップすることがあります。別のオプションは、生のHTMLの代わりにJSONを返し、それを管理可能なチャンク（チャンクあたり〜5行のデータ）に分割し、requestAnimationFrameコールバックを使用してHTMLに結果を書き込みます。