JavaScript: автоматическое выполнение функций на основе заранее определенной временной шкалы

Question

Я пытаюсь создать веб-приложение, которое будет автоматически выполнять функции JS для пользователя на основе заранее определенного времени.

Например: у меня есть следующие функции на веб-странице:

• function a () {do stuff}
• function b () {do some other stuff}
• function c () {do other stuff}

и временная шкала JSON, загруженная для каждого пользователя:

"timeline":[
    {"ontime":" 00:00:00,000", "execute_func":"a"}, 
    {"ontime ":" 00:00:02,000", "execute_func":"b"}, 
    {"ontime ":" 00:00:07,000", "execute_func":"c"}, 
    {"ontime ":" 00:00:08,000", "execute_func":"a"}, 
    {"ontime ":" 00:00:13,000", "execute_func":"c"}
...
]

Есть ли способ автоматически запускать эти функции, основываясь на порядке и времени их появления на "временной шкале"?

Заранее большое спасибо за любую помощь!

Answer 1

Первая проблема с вашим JSON, это не правильно. Вы можете сделать это лучше, как это:

"timeline": [
  {"ontime": "00:00:00,000", "execute_func": "a"}, 
  {"ontime": "00:00:02,000", "execute_func": "b"}, 
  {"ontime": "00:00:07,000", "execute_func": "c"}, 
  {"ontime": "00:00:08,000", "execute_func": "a"}, 
  {"ontime": "00:00:13,000", "execute_func": "c"}
  ...
]

Обратите внимание на расстояние между клавишами... Был пробел после ontime которого там быть не должно...

Вам нужно настроить функцию обработчика события синхронизации, которая выполняется каждую секунду следующим образом:

setTimeout(function () {
  // Execute every 1 second.
  // Get the current time.
  curTime = (new Date());
  var curTime = ("0" + curTime.getHours()).substr(-2) + ":" + ("0" + curTime.getMinutes()).substr(-2) + ":" + ("0" + curTime.getSeconds()).substr(-2);
  if (typeof getFunctionOnTime(curTime) == "function") {
    getFunctionOnTime(curTime)();
  }
}, 1000);

getFunctionOnTime Функция вернет функцию, если нет, она вернет false.

function getFunctionOnTime(time) {
  for (var i = 0; i < timeline.length; i++) {
    if (timeline[i].ontime == time) {
      return (window[timeline[i].execute_func] || false);
    }
  }
}

Вышеуказанная функция предполагает, что execute_func функция объявлена ​​в глобальном или window объем. Это может быть не идеальное решение, но это работает. Это имеет огромную сферу оптимизации.