如何在进行密集计算的同时保持动画gif的运行

How to keep animated gif running while doing intense calculations

本文关键字：动画 运行 gif 计算      更新时间：2023-09-26

我有一个页面，它用Javascript进行一些密集而持久的计算。我想有一个加载动画，告诉用户正在取得进展。我现在有一个动画gif，但在运行Javascript时，整个浏览器窗口都会冻结(gif不会播放(。然后，当它完成时，它就会解冻。计算必须在客户端进行，因此不能在服务器上进行。

有没有一种方法可以防止Javascript在进行计算时冻结页面并停止播放动画？

您还可以使用HTML5 webworkers(维基百科(在后台运行长时间运行的脚本。这就像javascript的多线程。

它将在除IE之外的最新浏览器中工作。

发现一个使用网络工作者的游戏查看

您可以将工作分成小块，并使用setTimeout开始下一次迭代，一旦第一次迭代完成，浏览器就有机会更新用户界面。(这是因为浏览器使用一个单独的线程，所以如果它忙于做js，就不能做其他事情(

Javascript处理是单线程的，因此当您的代码正在运行时，不会运行其他动画代码。

您需要将处理设置为批量运行。我不知道你在处理什么，但如果你正在做一些可以很容易划分的事情，那么你可以处理前N个项目，然后使用setTimeout来安排下一个区块在几毫秒内运行。这样，你就给了浏览器时间去做其他需要做的事情。

您可能不再需要它了，但为了防止其他人在谷歌上搜索它，这里有另一个简单的解决方案：

*请注意，只有当这个巨大的脚本执行是由长时间的迭代循环引起时，它才会起作用

-让你的循环像这样：

function AsyncLoop(i, lastLoop, parameters) {
        setTimeout(function () {
            if (i < lastLoop) {
                //whatever you wanna do here
                window.console.log('iteration ' + i + ': ' + parameters[i].whatevs);
                i++;
                AsyncLoop(i, lastLoop, parameters);
            }
        }, 0);
    }

-然后称之为：

AsyncLoop(0, incredblyLongObjectArray.length, incredblyLongObjectArray);

这里有一个小技巧，不使用参数(这样更容易理解(，并带有一个检测所需脚本是否已完成执行的功能：

https://jsfiddle.net/or1mrmer/

如果浏览器冻结，则表示您正在做一些严肃的工作。

解决这个问题的唯一方法是在脚本执行的每秒钟增加100毫秒的睡眠时间。请查看javascript setInterval()调用。

CSS3动画通常会继续运行，即使JavaScript被阻止(用Chrome 40.0测试(

因此，您可以使用SpinKit或spin.js等库来可视化计算正在进行。

但是，请注意CSS3动画的可用性：
caniuse.com
消除安卓CSS动画神话

我在这里用一个功能示例(带有简单的进度指示器(回答了这个问题。

它使用"yield"，当你只想给其他进程一个时间片时，它的使用(和修改现有的JS循环(非常简单，而且它比网络工作者(我也使用过(更容易设置，尤其是如果你已经有一个与全局变量交互的循环。

相关文章：