Javascript实时动画

我正在使用Javascript中的遗传算法，并且需要实时可视化算法提供的解决方案。Javascript实时动画

基本上，我需要something like this（当点击“运行”）

我所有的努力，用的DIV和CSS的定位，或者创建SVG结束了一个空白的屏幕和浏览器崩溃。

使用setInterval在渲染中定义步骤似乎是一个坏主意，因为它也大大降低了算法速度。

我错过了什么吗？

2017-11-11 Jérémie

显示您的代码！ –

没有代码，无限循环的每一次尝试都失败了。我正在寻找建议或想法，这就是要点。 –

失败的尝试代码将是一个很好的基础来解决问题... –

好，与浏览器崩溃问题可以用正确使用的setTimeout，nextTick，setImmediate或requestAnimationFrame来解决，从而使浏览器的下一个计算之前渲染图。

由于我需要一些图表渲染以及显示结果，我最终使用了P5.js，这非常棒。

2017-11-11 15:31:51

你还应该看看[requestAnimationFrame]（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）而不是setTimeout ... –

我编辑了我的答案，谢谢！ –

我建议您使用Reactjs。该框架可以实时组织组件。我有一个叫做生命游戏的项目，它就像遗传算法一样。

[Codepen](https://codepen.io/israelmarmar/pen/vZmWPp)

2017-11-11 13:19:27

感谢您的答案。可悲的是我不能在这个项目上使用ReactJs。我发现的例子似乎使用某种无限循环，所以我很困惑。虽然真的很酷的例子！ –

回答