javascript 处理卡住时显示 GIF 图像

Question

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

我的 javascript function 看起来像这样

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 animation 和 js 都使用同一个线程来运行，并且一次只能用于一个线程。

请指教。

Answer 1

Gif 不会显示 animation，因为浏览器渲染过程实际上是在运行 javascript 代码的同一线程中。 为了实现您想要做的事情，您必须使用Web Workers ，但请记住，并非所有浏览器都支持它。

Answer 2

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

Answer 3

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

在setTimeout调用之间，我的 for 循环的 10,000 次迭代结果证明是一个延迟 10 毫秒的最佳点。 作为用户体验的总时间最终会感觉更短，因为他们仍然可以与页面交互，并且他们更耐心，因为他们可以观察到 animation 意味着工作正在完成。 这似乎比“尽快”完成操作的卡住页面更可取。

项目的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);
    }
}

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