Javascriptイベント同期

Question

私はjavascript（jQueryを使用）で非常に重いコンサートカレンダーを作成しています。アプリ全体でさまざまなイベントを同期させるのに問題があります。これを行う方法の提案を探しています。

簡単な使用例例：

：
1. ユーザーが
2. カレンダーは、その月

より複雑なユースケースの一例にスキップ月にクリックします

1. ユーザーはアーティストを選択します
2. カレンダーは彼
3. カレンダーが
4. カレンダーは、そのアーティストのショー（複数可）を強調してその月にスキップし、そのアーティストの最初のショーの日

一つ時折問題は、新しい月がまだ私がしようとした時間によってレンダリングされていないということですアーティストのショーをハイライトする。したがって、これらの関数が順番に呼び出されても、ショーは強調表示されません。明らかに、setTimeout（）を使用することはかなりハッキーであり、動作することは保証されていません。

まず最初に、次の機能が順不同で実行されることは可能ですか（Chromeでも）。

function steps(){ 

    stepOne(); //TAKES 30 SECONDS 

    stepTwo(); //TAKES < 1 SECOND 

} 

第二に、関連する簡単な質問：

 
    If placed at the end of a function, will a JS callback ALWAYS run after 
    everything else in the given function has finished running? 

もしそうなら、私でし巣その前の関数のコールバックとして機能します。しかし、いろいろなユースケースを考慮すれば、それは扱いにくくなるでしょう。私は、これはすべての機能が順に呼ばれていることを確認想像

 
    1) Allow each function an optional callback parameter. If it's present, 
     call it at the very end of the function. 

    2) During a UI refresh, create an array, and stack any functions to be 
     called within this array. 

    3) Once this "script" is completed, iterate through the array, calling 
     each function in the order it was added, using the next function 
     as the previous function's callback. 

：

は、ここで私が検討しているアプローチです。

別のアプローチは、

$(document).bind("listener.name", fnCallback); 

を使用してイベントリスナーを添付し、そのイベントが発生するたびに

$(document).trigger("listener.name"); 

を呼び出すことです。

しかし、さまざまなイベントがユースケースに応じて異なる関数セットを呼び出す必要があると考えられるので、これは扱いにくいものと思われます。私はいつもそこに新しいイベントを追加する前に

$(document).unbind("listener.name"); 

を呼び出すことができますが、再び - 私は最初のアプローチで示唆されているように、マスター「スクリプト」のようなものを作成するに傾いています。

これはあまりあいまいではありません - ご意見はありますか？さまざまなイベントを同期させなければならない複雑なUIの経験

おかげで非常に多く、

マイケル

Answer 1

あなたのアプローチ＃1が最良の方法、そして最も自然ですjQueryを使用します。ユーザーインターフェイス上で動作し、何かを行うほとんどの関数は、関数が実行された後に呼び出されるコールバック関数パラメータを受け入れます。

jQueryで実装されていないものを同じパターンで実行しているところでは、コードを読みやすくします。ドミニクの答えは良い簡潔な例です：

function steps(){ 

    stepOne(stepTwo); 

} 

function stepOne(callback){ 

    var AsyncDone = function() { 
     //any Synchronus Things here 
     callback(); 
    } 
    someAsyncFunction(params, AsyncDone); 

} 

Answer 2

引数としてコールバックされる関数に渡してみ

function steps(){ 

    stepOne(stepTwo); 

} 

function stepOne(callback){ 

    var AsyncDone = function() { 
     //any Synchronus Things here 
     callback(); 
    } 
    someAsyncFunction(params, AsyncDone); 

} 

Answer 3

私の謙虚な意見では、最後のアプローチは、カスタムイベントを使用することです。

さまざまなコンポーネントとイベントを設計し、相互に作用させます。

など。 Calendarオブジェクトがあるとします。

var calendar = function() 
{ 
    var pub = {}; 


    pub.highlightRow = function(row) {}; 

    pub.getRowByContent = function(content) { }; 

    pub.selectMonth = function() 
         { 
          //your code to actually select month. 

          //Once all the necessary DOM work is done, fire the 
          //monthSelected event (namespacing the event so as to avoid the clash with other events). 
          $(document).trigger('calendar:monthSelected'); 
         }; 

    return pub; 
}(); 

今、あなたのアーティストの検索方法は、同じよう

function searchArtist(artistName) 
{ 
    $(document).bind('calendar:monthSelected'), function() 
               { 
                calendar.highlightRow(calendar.getRowByContent(artistName)); 
               } 
               ); 

    calendar.selectMonth(getShowMonthByArtist(artistName)); 
}