使用ajax进行自动刷新会在10-15秒后导致浏览器挂起或崩溃

Auto refresh with ajax is hanging / crashing browser after 10-15 seconds

本文关键字：浏览器 挂起 崩溃 10-15秒 ajax 刷新 使用      更新时间：2023-09-26

使用ajax自动刷新div会在10-15秒内挂起浏览器。我不知道有什么问题。当我检查笔记本电脑时，它挂起/崩溃，手机也是如此。

笔记本电脑显示浏览器无响应

代码如下:

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

你的代码有两个潜在的问题可能会导致这个问题。

您不应该在这里使用setInterval，因为无论最后一个请求是否完成，它都会触发AJAX调用。它没有考虑每个请求的持续时间和加载时间。

轮询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" />

第二个问题是，将HTML直接放入resultdiv是一个同步操作，将占用JavaScript线程，导致其无响应。如果有效负载很小(分页)，这可能没问题，但是对于大的有效负载，您将看到浏览器挂起。另一个选择是返回JSON而不是原始HTML，将其分成可管理的块(每个块约5行数据)，然后使用requestAnimationFrame回调将结果写入HTML。

相关文章：