Выполнять симуляции в реальном времени (динамические системы), где пользователь может взаимодействовать

Question

Я хотел бы использовать HTML и Javascript для имитации некоторой системы, скажем, дискретного дифференциального уравнения, такого как

x_new = x_old + factor * (bound - x_old)

Теперь я хотел бы дать пользователю, просматривающему HTML-страницу, возможность вмешиваться в режиме реального времени, например, изменить значение factor с помощью какого-либо ползунка и увидеть его влияние на динамическую систему.

Теперь, в принципе, я знаю основы для этого, но у меня возникли проблемы со следующей проблемой:

Мне нужно установить скорость моделирования на какое-то значение, и так как вычисления (очевидно) очень быстрые, мне нужно вставить искусственное время ожидания (такое, чтобы симуляции ощущались как «в реальном времени», а не просто проскальзывали в десятая часть секунды). В то же время я хотел бы позволить пользователю взаимодействовать со всеми элементами без «зависания» окна из-за некоторого процесса ожидания. В общем, у меня есть следующие характеристики:

• Моделирование в реальном времени какого-либо процесса
• Пользователь может взаимодействовать в любое время (используя кнопки и ползунки) и видеть изменения в динамике

Я уверен, что нечто подобное уже существует, поэтому кто-нибудь может указать мне пример "лучшей практики"? Кроме того, совет о том, как решить проблему самостоятельно, также будет принята с благодарностью. Спасибо!

Answer 1

Благодаря CodeHacker я смог реализовать то, что хотел. Ниже приведена слегка адаптированная версия его предложения, теперь с симом «в реальном времени», который вы можете изменить. Я использовал рекурсивные вызовы функции обновления вместе с глобальной переменной счетчика, чтобы создать непрерывную симуляцию. Код:

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

}

Это (рекурсивный вызов) считается плохой практикой или все в порядке?

Answer 2

Что касается «скользящей» части, вы можете использовать некоторые внешние компоненты, но это немного зависит от используемой вами структуры JavaScript и / или от того, используете ли вы Jquery или тому подобное.

Для имитации более низкой скорости вы можете использовать window.setTimeout. Эта функция в основном выполняет другую функцию после ожидания количества миллисекунд.

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

Я сделал очень простой чистый образец javascript / html в jsfiddle. Это должно начать вас.

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