如何在不冻结的情况下创建永久动画？答案

【问题标题】：How do create perpetual animation without freezing?如何在不冻结的情况下创建永久动画？
【发布时间】：2013-11-05 02:01:10
【问题描述】：

我还是 Javascript 的新手。我试着写了一个程序让图像一直fadeToggle，所以我使用了while条件语句（结合一个常量变量）；在运行它并冻结我的计算机（然后记住病毒基本上是无限操作）之后，我在这里搜索了一下，意识到我可能确实应该永远不要使用无限循环。

（实际上我想要微光——意思是从不透明度 0.9 到 0.6 再到 0.9 等等......）所以它与 fadeToggle 不同，但同样的问题仍然存在；如何让它无限运行？（无需编写恶意代码。）

这是我写的，供大家参考：

<script>
$(document).ready(function(){
var always10 = 10;
while (always10 == 10) {
    $('.pimg').fadeToggle(2600);
                   }
});
</script>

另外，我在另一个线程上发现while(true) 更适合无限循环。所以另一个问题：无限循环有时好吗？

【问题讨论】：

无限循环在 Javascript 中几乎是不可能的。它是单线程的，因此您永远无法与文档进行交互。使用setInterval()在后台定期运行函数。

标签： javascript animation while-loop conditional infinite-loop

【解决方案1】：

只需使用 jQuery 动画已经提供的回调，例如 .fadeToggle:

function fadeToggleForever ($e) {
    $e.fadeToggle({
        duration: 2600,
        // start another fadeToggle when this one completes
        complete: function () { fadeToggleForever($e) }
    });
}

// main code
fadeToggleForever($('.pimg'));

使用完整的回调是可行的，因为 jQuery 动画在内部使用 setTimeout（或者可能是 setInterval），因此“屈服”代码执行，以便浏览器可以继续对用户输入做出反应并更新显示。

【讨论】：

【解决方案2】：

由于 Javascript 是异步的，因此没有 sleep 方法。但是，一个好主意是使用setInterval 或setTimeout。

如果没有这些功能，您的循环将尽可能多地占用资源，并可能导致冻结（取决于您的浏览器）。

【讨论】：

异步和睡眠模式 = 超出了我的想象（我不会说另一种编程语言，所以 :-P），但是 setInterval 和 setTimeout 解决了我的问题。和另一张海报一样，我想自己写，所以我没有使用 jquery。谢谢大家！