Javascript jquery addClass不'；我不能立即生效_Javascript_Jquery_Css

Javascript jquery addClass不'；我不能立即生效

javascript jquery css

Javascript jquery addClass不'；我不能立即生效,javascript,jquery,css,Javascript,Jquery,Css,我有一个加载数据的页面（它将使用AJAX），所以我想显示一条“正在加载，请稍候”消息。目前，我正在使用一个循环模拟网络延迟。我使用JQuery设置和显示消息，但直到循环完成后才显示消息。我需要做什么来“刷新”JQuery命令，以便在调用循环之前显示消息我在下面提供了框架CSS、HTML和JQuery/JavaScript <!DOCTYPE html> <html> <head> <style> .ais-card-message { p

我有一个加载数据的页面（它将使用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.&nbsp;
        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>


.ais卡信息{
填充：6px；
边缘顶部：6px；
边缘底部：6px；
文本对齐：左对齐；
}
.ais卡信息{
背景色：淡天蓝；
}
.ais卡信息警告{
背景颜色：浅粉色；
}
单击按钮时，应在下方显示消息“正在加载，请稍候…”。
在短时间延迟后，后跟“错误”或“加载”
数据将在此处加载
信息应该显示在这里
负载
$（文档）.ready（函数（）{
函数showMsg（消息，类型）{
//消息是要显示的消息。类型为“信息”或“警告”
$（'#msgBox'）.removeClass（“ais卡消息信息ais卡消息警告”）；
$（'#msgBox'）.addClass（“ais卡消息-”+类型）；
$（'msgBox'）.text（msg）；
$（'#msgBox'）.show（）；
返回
}
$（'#btnLoad'）。单击（函数（）{
//由于某些原因，以下消息不会显示
showMsg（'正在加载，请稍候…'，'info'）；
如果（！loadData（））{
//但如果loadData返回false，则会显示此消息
showMsg（'Error'，'warn'）；
返回
}否则{
//如果loadData返回true，此消息也会显示
showMsg（'Loaded'，'info'）；
返回
}
});
函数loadData（）{
//只是一个模拟网络延迟的循环
var i；
对于（i=0；i<100000；i++）{
var j；
对于（j=0；j<100000；j++）{
var k=数学sqrt（j）；
}
}
$（“#数据”）.text（“这是一些虚拟数据”）；
返回真值
}
});

您的代码中有几个问题。首先，在“模拟”AJAX请求中，您使用的是循环。这是一个同步操作，是导致UI无法更新的问题的原因；循环正在停止执行任何其他操作（即DOM中元素的更新）。因此，它似乎只在循环完成后更新

其次，一旦您在

loadData（）

函数中实际开始使用AJAX请求，您将遇到同步性问题，因为您希望布尔返回值指示AJAX请求是否有效。这在异步逻辑中是不可能的。因此，您需要处理承诺和/或回调

为此，您需要在

loadData（）

函数中从

$.ajax（）

返回承诺。然后可以使用

done（）

和

fail（）

方法根据请求的结果更新DOM。它应该是这样的：

$('#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请求。您可以看到，由于正确使用了异步逻辑，加载消息现在显示正确

$（文档）.ready（函数（）{
函数showMsg（消息，类型）{
$（“#msgBox”）
.removeClass（“ais卡消息信息ais卡消息警告”）
.addClass（“ais卡消息-”+类型）
.text（msg）
.show（）；
}
$（'#btnLoad'）。单击（函数（）{
showMsg（'正在加载，请稍候…'，'info'）；
loadData（）.done（函数（））{
showMsg（'Loaded'，'info'）；
}).fail（函数（）{
showMsg（'Error'，'warn'）；
});
});
函数loadData（）{
//模拟AJAX请求，仅用于此演示
var deferred=jQuery.deferred（）；
setTimeout（函数（）{
延迟。解决（）；
}, 3000);
延期归还；
}
});
.ais卡信息{
填充：6px；
边缘顶部：6px；
边缘底部：6px；
文本对齐：左对齐；
}
.ais卡信息{
背景色：淡天蓝；
}
.ais卡信息警告{
背景颜色：浅粉色；
}

单击按钮时，应在下方显示消息“正在加载，请稍候…”。在短时间延迟后，后跟“错误”或“加载”
数据将在此处加载
信息应该显示在这里
负载
非常感谢。但就我所知，为什么循环会阻止前面对showMsg的调用？我可以理解在我调用循环后它会阻止代码，但我不理解为什么在我调用循环前它会阻止调用的代码。这是因为DOM更新是一个（相对）缓慢的操作。因此，在DOM更新之前，执行会移动到下一条语句（以启动循环）。然后循环阻止线程执行任何其他操作。如果您可以降低此逻辑的速度，您将看到，一旦循环完成，第一个showMessage（）
调用就会发生（这是您在循环之前期望的），然后立即被第二个调用取代。