使用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。