JavaScript：あらかじめ定義されたタイムラインに基づいて関数を自動的に実行する

Question

あらかじめ定義された時間に基づいてユーザーのためにJS関数を自動的に実行するWebアプリケーションを作成しようとしています。

例えば：

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

：ユーザーごとにロードされ

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

とJSONのタイムライン：私は、Webページ上で、次のような機能を持っています

「タイムライン」に表示される順序とタイミングに基づいて、これらの機能を自動的に起動する方法はありますか？

事前のお手伝いをさせていただきます。

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スコープ内で宣言されていることを前提としています。これは究極の完璧な解決策ではないかもしれませんが、これはうまくいきます。これには膨大な最適化の範囲があります。