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"}
...
]

有没有办法根据它们在 "timeline" 中出现的顺序和时间自动触发这些函数？

非常感谢您的帮助！

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 后有一个space，不应该出现...

你需要设置一个定时事件处理函数，它每秒执行一次：

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函数将return函数，如果不是，则returns 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范围内声明的。这可能不是最终完美的解决方案，但它确实有效。这有很大的优化范围。

JavaScript：根据预定义的时间线自动执行功能

JavaScript: Execute functions automatically based on a pre-defined timeline

javascript

jquery

json

timeline

function