Question

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

点击下面代码段中的按钮，我希望文字＆＃34;一些数据＆＃34;立即替换为＆＃34;正在加载......＆＃34;然后回到＆＃34;其他一些数据＆＃34; 5秒后。

正如您所看到的，事实并非如此：

＆＃13;

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) {}
}

＆＃13;

<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>

＆＃13;

事实上，＆＃34;正在加载＆＃34;元素永远不会出现，而且＆＃34;其他一些数据＆＃34;如果没有我们假设的用户在漫长的等待期间得到任何反馈，我们就会被替换。

我可以做些什么来确保jQuery隐藏并显示我的元素现在，而不是一旦我的所有函数都执行完毕？

Answer 1

在您的代码停止执行之前，屏幕不会被呈现。这几乎总是理想的行为，因为它阻止了DOM处于不一致状态。

假设您确实需要运行长同步任务，并且您可以修复它或将其推迟到webworker，那么解决方案是使用setTimeout：< / p>

＆＃13;

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) {}
}

＆＃13;

<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>

＆＃13;

只是为了确保我没有帮你隐藏错误：从不执行同步ajax调用。

当你在浏览器中真正进行合法且有些长时间的同步操作（例如计算或构建复杂的GUI）时，有理由做我的建议。 / p>

jQuery hide（）和show（）在函数

1 个答案: