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。我發現的例子似乎使用某種無限循環，所以我很困惑。雖然真的很酷的例子！ –

回答