javascript - Javascript/jQuery 中的长任务

Question

我在 Javascript 中有一个很长的任务，应该在显示网页内容之前执行。在执行此任务期间，我想显示一个不透明度将增长到 100% 的图像(当任务完成时)。如何实现？

Answer 1

在你的函数中，假设它有 10 个循环，每个循环你都需要增加不透明度，如下所示:

var curOpacity = 0; 
function doWork(step) {
    for(var j  = 0; j <100000000; j++) { } //simulate work
    console.log("Completed step: " + step);
    $("#element").css('opacity', step * 0.1);  
    if(step < 10)
        setTimeout(function() { doWork(step + 1); });
}
doWork(0);

You can see a working demo here

在最后一步，将不透明度设置为 1，完全淡入。您只需要划分的步骤，您需要将不透明度增加 1/numOfSteps 每一步...a .fadeIn() 在这里不起作用，因为它只会在您的代码完成后执行...您需要使用 .css() 手动设置不透明度在循环内。

setTimeout()(没有参数它是即时的)让 UI 在下一步开始之前更新。

注意:这适用于跨浏览器，只需使用 opacity，它会负责在 IE 中设置 filter:。