使用 ajax 的自动刷新在 10-15 秒后挂起/崩溃浏览器

Question

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

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

代码如下：

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

Answer 1

您的代码有 2 个可能导致该问题的潜在问题。

您不应在此处使用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 直接放入结果 div 是一个同步操作，会占用 JavaScript 线程，导致其无响应。如果有效负载很小（分页），这可能很好，但对于大型有效负载，您会看到浏览器挂起。另一种选择是返回 JSON 而不是原始 HTML，将其拆分为可管理的块（每个块约 5 行数据），然后使用 requestAnimationFrame 回调将结果写入 HTML。