进行用户可以交互的实时（动态系统）模拟

Question

我想用 HTML 和 Javascript 来模拟一些系统，比如说像

这样的离散微分方程

x_new = x_old + factor * (bound - x_old)

现在我想为查看 HTML 页面的用户提供实时干预的可能性，例如使用一些滑块更改 factor 的值并查看其对页面的影响动力系统。

现在原则上我知道这样做的基础知识，但我遇到了以下问题：

我需要将模拟速度设置为某个值，并且由于计算（显然）非常快，我需要插入人为的等待时间（这样模拟感觉就像 "real time"，而不只是快速过去十分之一秒）。同时，由于一些等待过程，我想让用户在没有 window "freezing up" 的情况下与所有元素进行交互。总而言之，我有以下规格：

一些过程的实时模拟
用户可以随时交互（使用按钮和滑块）并查看动态变化

我确信类似的东西已经存在所以任何人都可以向我指出一个 "best practice" 例子吗？或者，也将不胜感激有关如何自己解决问题的提示。谢谢！

Answer 1

那么对于 "sliding" 部分，您可以使用一些外部组件，但这在一定程度上取决于您使用的 JavaScript 框架和/或如果您使用 Jquery或类似的东西。

要模拟较低的速度，您可以使用 window.setTimeout。此函数基本上是在等待一定毫秒数后执行另一个函数。

setTimeout(
        function(){
            ///Make something here 
            }, 3000); //execute it after 3000 milliseconds passed.

我在 jsfiddle 中制作了一个非常基本的纯 javascript/html 示例。这应该可以帮助您入门。

https://jsfiddle.net/pimboden40/L65te3f2/17/

Answer 2

感谢 CodeHacker，我能够实现我想要的东西。下面是他的建议的一个稍微改编的版本，现在你可以使用 "real-time" sim 进行更改。为了创建连续模拟，我使用了更新函数的递归调用和全局计数器变量。代码：

function calculate(x_old, factor, bound){
        return x_old + factor * (bound - x_old);
}

var cnt = 0;

function callDelayed(){
        console.log(cnt)
        var x_old = Number(document.getElementById('x-old').value) ;
        var factor =Number(document.getElementById('factor').value) ;
        var bound = Number(document.getElementById('bound').value) ;
         setTimeout(
            function(){
                var calculation =  calculate(x_old, factor, bound);
                  document.getElementById('result').value = calculation; 
                  console.log("Finished step " + cnt); 
                  // update x_old
                  document.getElementById('x-old').value = document.getElementById('result').value
                  cnt = cnt+1;
                  // if time has not run out, update again
                  if (cnt <= 100)
                  {
                      callDelayed()
                  }
                  else
                    return
                 }, 100);

}

这种（递归调用）被认为是不好的做法还是可以的？

进行用户可以交互的实时（动态系统）模拟

Make a real-time (dynamical systems) simulations where user can interact

html

javascript

simulation

user-controls