Javascript 显示正在加载处理器的异常行为

也许我应该改进我的例子

函数doSomethingHeavy（）{
//模仿做某事
var now=new Date（）.getTime（）；
while（new Date（）.getTime（）

执行测试
加载
问题在于
apply
函数，它将执行线程保持5秒钟

在javascript中，脚本执行和ui刷新都在一个线程中进行，因此如果在脚本完成之前运行脚本，ui将不会得到更新

因此，
apply
函数在调用show后很快就会保持执行线程，因此不会执行UI中元素的显示

因此，要延迟项目的执行，而不是使用硬编码的
，而使用基于循环的延迟，请使用计时器，如下所示


函数显示（）{
返回$（“#加载”）.show（）.promise（）；
}
函数hide（）{
返回$（“#加载”）.hide（）.promise（）；
}
函数start（）{
返回$.when（show（））。然后（apply）。然后（hide）；
}
函数apply（）{
var deferred=$.deferred（）；
var now=new Date（）.getTime（）；
setTimeout（函数（）{
延迟。解决（）；
}, 5000)
延迟返回。承诺（）；
}
start（）

加载
也许您应该检查功能

下面是一个使用它的示例：


var延迟=1000，
动画持续时间=500；
变量加载={
elm:function（）{
返回$（'#加载'）。延迟（延迟）；
},
show:function（）{
加载.elm（）.fadeIn（动画持续时间）；
},
隐藏：函数（）{
加载.elm（）.fadeOut（动画持续时间）；
}
};
loading.show（）；
setTimeout（loading.hide，2000）
#加载{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景：#ccc；
显示：无；
}
@jfriend00的答案应该有用。但是使用
window.setTimeout
是不可靠的。刚刚使用CPU速度慢/内存低的虚拟机进行了检查，
window.setTimeout
15ms不起作用

为了获得更可靠的方法，您可以尝试使用
window.requestAnimationFrame
，这可以保证发生重画/回流事件


$（文档）.ready（函数（）{
函数showLoading（）{
$（“#加载”）.show（）；
}
函数hideLoading（）{
$（“#加载”）.hide（）；
}
函数性能测试（）{
showLoading（）；
window.requestAnimationFrame（函数（）{
//为#加载以显示。。。
window.requestAnimationFrame（函数（）{
doSomethingHeavy（4000）；
hideLoading（）；
});
});
}
函数doSomethingHeavy（处理时间）{
//模仿做某事
var start=+新日期（）；
同时（+new Date（）-start

执行测试
加载。。。（这将在4秒钟内消失）
您真的希望在解决方案中使用延迟还是我可以提供替代解决方案？浏览器在Javascript完成之前不会重新绘制。您不能像这样循环，并期望在此期间重新绘制。Javascript不是这样工作的。因为您使用的是jQuery，所以可以只使用jQuery动画和延迟或
setTimeout（）
。另外，为什么要使用同步操作的承诺？奇怪，我想问“为什么”，但不想问“如何”。非常感谢。我已经改进了我的例子。我想问一下，为什么在调用doSomethingHeavy（）之前不显示加载。实际上，我不想延迟，而是要做一些非常繁重（耗时）的事情。我改进了我的例子，没有任何承诺模式。这个问题还没有解决。也许，这与您所说的“在javascript中，脚本执行和ui刷新都发生在一个线程中，因此如果您运行脚本直到完成，ui将不会得到更新”有关。然后您可以将耗时的活动放入
setTimeout（function（）{}，0）
handler这似乎是最可靠的解决方案。作为请求AnimationFrame不跨浏览器。最后，我导入了一个库“RequestFrame”，以使requestAnimationFrame跨浏览器。谢谢。