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

}

（递归调用）被认为是不好的做法吗？

进行实时（动力系统）仿真，用户可以在其中进行交互

2 个答案: