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

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

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

这样的离散微分方程
x_new = x_old + factor * (bound - x_old)

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

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

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

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

那么对于 "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/

感谢 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);

}

这种(递归调用)被认为是不好的做法还是可以的?