稍后在函数中反转时，jQuery hide()和show()不会立即运行 [英] jQuery hide() and show() not immediately run when reversed later in the function

问题描述

我正在使用jQuery的.hide()和.show()函数在执行可能很长的同步Web服务调用时显示加载消息.

I'm using jQuery's .hide() and .show() functions to show a loading message while a potentially long synchronous webservice call executes.

当单击下面的代码片段中的按钮时，我希望文本"Some data"将立即被"Loading ..."替换，然后在5秒钟后返回"Some other data".

When clicking the button in the below snippet, I would expect the text "Some data" to be immediately replaced with "Loading..." and then go back to "Some other data" after 5 seconds.

如您所见，这不会发生:

As you can see, that is not what happens:

function run_test() {
    $('#test1').hide();
    $('#test2').show();
    
    long_synchronous_function_call()
    
    $('#test2').hide();
    $('#test1').show();
}

function long_synchronous_function_call() {
    $('#test1').html('<p>Some other data</p>');
    var date = new Date();
	while ((new Date()) - date <= 5000) {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="test1">
    <p>Some data</p>
</div>

<div id="test2" style="display:none">
    <p>Loading...</p>
</div>

<button onclick="run_test()">Call a long synchronous function!</button>

实际上，"Loading"元素从未出现，"Some other data"仅被替换，而我们的假设用户在漫长的等待中未得到任何反馈.

In fact, the "Loading" element never appears, and "Some other data" is simply replaced without our hypothetical user getting any feedback during the long wait.

我该怎么做才能确保jQuery隐藏并显示我的元素 now ，而不是在所有函数执行完毕后立即显示?

What can I do to ensure that jQuery hides and shows my elements now, not once all my functions have finished executing?

推荐答案

在代码停止执行之前，不会渲染屏幕.这几乎总是所需的行为，因为它可以防止以不一致的状态呈现DOM.

The screen won't be rendered until your code stops execution. This is almost always the desired behavior, as it prevents the rendering of the DOM in an inconsistent state.

假设您确实需要运行长时间的同步任务，则可以对其进行修复或将其推迟到

Supposing you really need to run a long synchronous task, and you can fix that or defer it to a webworker, then a solution is to use setTimeout:

function run_test() {
    $('#test1').hide();
    $('#test2').show();
    
    setTimeout(function(){
       long_synchronous_function_call()
    
       $('#test2').hide();
       $('#test1').show();
    },0);
}

function long_synchronous_function_call() {
    $('#test1').html('<p>Some other data</p>');
    var date = new Date();
	while ((new Date()) - date <= 5000) {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="test1">
    <p>Some data</p>
</div>

<div id="test2" style="display:none">
    <p>Loading...</p>
</div>

<button onclick="run_test()">Call a long synchronous function!</button>

请确保我不会帮助您隐藏错误:从不进行同步ajax调用.

Just to be sure I'm not helping you hiding a bug: NEVER do synchronous ajax calls.

在您的浏览器中确实发生合法且相当长的同步操作(例如计算或构建复杂的GUI)时，合理地执行我建议的操作.

It is reasonable to do what I suggest when you really have a legitimate and somewhat long synchronous operation happening in your browser, though (for example a computation or the building of a complex GUI).

这篇关于稍后在函数中反转时，jQuery hide()和show()不会立即运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！