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

Question

我想用HTML和Javascript来模拟一些系统，比方说像一个离散化的微分方程

x_new = x_old + factor * (bound - x_old)

现在我想给用户看HTML页面实时干扰的可能性，例如用一些滑块改变factor的值，看看它对动力系统的影响。

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

我需要将模拟速度设置为某个值，并且由于计算（显然）非常快，我需要插入人工等待时间（这样模拟感觉就像“实时”并且不仅仅是过去的十分之一第二）。与此同时，我想让用户与所有元素进行交互，而不会因为某些等待过程而使窗口“冻结”。总而言之，我有以下规格：

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

我确信这样的东西已经存在，所以有人能向我指出一个“最佳实践”的例子吗？另外，关于如何自己解决问题的提示也将非常感激。谢谢！

Answer 1

对于“滑动”部分，您可以使用一些外部组件，但这取决于您正在使用的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，我能够实现我想要的东西。下面是他的建议的略微改编版本，现在有一个你可以改变的“实时”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);

}

是（递归呼叫）被认为是不好的做法还是没有问题？