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

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

你不应该在这里使用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。

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

1 个答案: