Question

我正在构建一个应用程序，其中我正在执行一些冗长的（10-15秒）java脚本执行。我希望在执行此操作时显示gif图像。我添加了一个gif加载图像，在我开始处理我的javascript之前，我将包含gif图像的div的样式设置为display：block并在javascript处理完成后，我将其设置回display：none。我可以看到gif图像适用但它没有显示动画。它被困住了。这个gif是一个加载图标。

我的javascript函数看起来像这样

function jsFunc(){
// set the div containg the image to display:block
elmDivGif.style.display="block";

Here comes my operation which will take 10-15 secons to finish

// setting the image style to none
elmDivGif.style.display="none";
}

这种方法有什么不对吗？我觉得gif动画和js都使用相同的线程来运行，它一次只能用于一个。

请建议。

Answer 1

Gif不会显示动画，因为浏览器呈现过程实际上是运行javascript代码的同一个线程。为了实现您要执行的操作，您必须使用Web Workers，但请记住，所有浏览器都不支持它。

Answer 2

如果你想同时运行javascript和动画gif，你的javascript代码必须有中断。这可以通过将其拆分为多个函数并使用setTimeout调用每个函数并延迟大约10毫秒来实现。

Answer 3

我成功地在javascript处理过程中使用setTimeout显示我的gif动画，将其分解并以足够小的突发进行处理，以免陷入显示，它允许其他点击事件等等。你没有提到你的过程是做什么的，所以我假设你可以将其中的一部分分解为亚毫秒组。

在setTimeout次调用之间，我的for循环的10,000次迭代结果是一个延迟10ms的最佳位置。用户所经历的总时间最终会变得更短，因为他们仍然可以与页面进行交互，并且他们更耐心，因为他们可以观察到包含正在完成工作的动画。这似乎比卡住的页面更可取，它可以“尽可能快地”完成操作。

项目的setTimeout次调用之间的迭代次数取决于每次迭代所需的时间。尝试多次迭代对您来说很有效，请记住，如果您尝试最大化迭代次数，较慢的计算机可能会有不同的体验。

以下是使我的应用程序更流畅地进行交互的伪代码：

masterArray = populateMasterArray();
processInteractively(0, masterArray, ...);
function processInteractively(i, masterList, ...) {
    if (masterList.length > i) {
        for (var x=0; x < 10000 && masterList.length > (i+x); x++) {
            var tempI = i + x;
            //...process this tempI iteration
        }
        i += x; // Lastly update i with however many iterations were processed

        // Wait 10 milliseconds to continue processing; allowing the 
        // browser time to compose itself and display a gif animation
        setTimeout(function() {
            processInteractively(i, masterList, ...);
        }, 10); 
    else {
        outputResults(...variablesBuiltDuringExecution);
    }
}

我注意到的一件事是，即使你的循环计数器“太高”，动画可能看起来“卡住”，它仍然根据自己的时间轴动画，并且只要动画可以恢复，它就会跳转到适当的外观。因此，可能在美学上可以接受在动画中有一些轻微（或几乎不可察觉）的暂停，这可以传达正在进行的工作。

在javascript处理被卡住时显示GIF图像

3 个答案: