JavaScript：根据预定义的时间线自动执行函数

Question

我正在尝试构建一个 Web 应用程序，它将根据预定义的时间自动为用户执行 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 范围内声明的。这可能不是最终完美的执行解决方案，但这是可行的。这有很大的优化范围。