我有一个加载数据的页面（它将使用AJAX），所以我想显示一条“正在加载，请稍候”消息。现在我正在使用循环模拟网络延迟。我使用 JQuery 设置并显示消息，但直到循环完成后才显示消息。我需要做什么来“刷新”JQuery 命令以便在调用循环之前显示消息？
我在下面提供了 CSS、HTML 和 JQuery/JavaScript 的骨架。
<!DOCTYPE html>
<html>
<head>
<style>
.ais-card-message {
padding: 6px;
margin-top: 6px;
margin-bottom: 6px;
text-align: left;
}
.ais-card-message-info {
background-color: lightskyblue;
}
.ais-card-message-warn {
background-color: lightpink;
}
</style>
</head>
<body>
<div id="title">
<p>Message "Loading, please wait ..." should appear below when button clicked.
Followed by either "Error" or "Loaded" after a short delay.</p>
</div>
<div id="data">Data will be loaded here</div>
<div id="msgBox" class="ais-card-message">Messages should display here</div>
<div><button id="btnLoad">Load</button></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function showMsg(msg, type) {
// msg is message to display. type is either "info" or "warn"
$('#msgBox').removeClass("ais-card-message-info ais-card-message-warn");
$('#msgBox').addClass("ais-card-message-" + type);
$('#msgBox').text(msg);
$('#msgBox').show();
return
}
$('#btnLoad').click(function(){
// For some reason the following message doesn't display
showMsg('Loading, please wait ...', 'info');
if (!loadData()) {
// But this message does display if loadData returns false
showMsg('Error', 'warn');
return
}else{
// and this message also displays if loadData returns true
showMsg('Loaded', 'info');
return
}
});
function loadData() {
// Just a loop to simulate network delay
var i;
for (i=0; i < 100000; i++) {
var j;
for (j=0; j < 100000; j++) {
var k = Math.sqrt(j);
}
}
$('#data').text("Here is some dummy data");
return true
}
});
</script>
</body>
</html>
您的代码中存在一些问题。首先，在“模拟”AJAX 请求中，您使用了循环。这是同步操作，也是导致 UI 无法更新的问题的原因；循环正在停止执行任何其他操作（即 DOM 中元素的更新）。因此，它似乎只在循环完成后才会更新。
其次，一旦您真正开始在
loadData()为此，您需要从
$.ajax()loadData()done()fail()$('#btnLoad').click(function() {
showMsg('Loading, please wait ...', 'info');
loadData().done(function() {
showMsg('Loaded', 'info');
}).fail(function() {
showMsg('Error', 'warn');
});
});
function loadData() {
return $.ajax({
url: '/yourpage',
data: {
foo: 'bar'
}
});
}
下面是一个工作示例，它通过在 3 秒后手动解析延迟对象来模拟 AJAX 请求。您可以看到，由于正确使用了异步逻辑，现在加载消息已正确显示。
$(document).ready(function() {
function showMsg(msg, type) {
$('#msgBox')
.removeClass("ais-card-message-info ais-card-message-warn")
.addClass("ais-card-message-" + type)
.text(msg)
.show();
}
$('#btnLoad').click(function() {
showMsg('Loading, please wait ...', 'info');
loadData().done(function() {
showMsg('Loaded', 'info');
}).fail(function() {
showMsg('Error', 'warn');
});
});
function loadData() {
// mock AJAX request, just for this demo
var deferred = jQuery.Deferred();
setTimeout(function() {
deferred.resolve();
}, 3000);
return deferred;
}
});.ais-card-message {
padding: 6px;
margin-top: 6px;
margin-bottom: 6px;
text-align: left;
}
.ais-card-message-info {
background-color: lightskyblue;
}
.ais-card-message-warn {
background-color: lightpink;
}<div id="title">
<p>Message "Loading, please wait ..." should appear below when button clicked. Followed by either "Error" or "Loaded" after a short delay.</p>
</div>
<div id="data">Data will be loaded here</div>
<div id="msgBox" class="ais-card-message">Messages should display here</div>
<div><button id="btnLoad">Load</button></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>使用超时脚本。
$("#component").addClass("class_1");
setTimeout(
() => {
// your code here! (what you want to do after add class)
}, "10"
);