Javascriptでコールバック関数をデバッグしています：2番目の関数に到達していません

Question

私はJavaScriptとCSSで少しfadeOut関数を書いたバニラのjavascript（JQueryは使用できません）でWebサイトを作成しています。次の関数が呼び出される前にfadeOutが終了するようにしたいと思います。これを行うために、私はコールバック関数を使用しようとしています - 関数の唯一の目的は、第2の関数が呼び出される前に最初の関数が確実に完了するようにすることです。私はいくつかのチュートリアルを読んだが、私が間違ってやっているかを把握することはできません - 私は、第二の機能に到着したことがない：

function mformSubmit() { 
    doCallback(fadeOut, function() { setupM }); 
} 

function fadeOut() { 
    for(var i=0; i<m_types.length; i++) { 
     if (document.getElementById(m_types[i]).className != 'selected') { 
      document.getElementById(m_types[i]).style.opacity = 0; 
     } else { 
      selection = m_types[i]; } 
     }; 
} 

function doCallback(callback) { 
    if (typeof callback === "function") { 
     callback(); 
    } 
} 

function setupM() { 
    alert("I arrived in the setup function"); 
} 

、関連するCSSビット：

label.unselected { 
background-color: #fff; 
float: left; 
padding: 5px; 
border: 2px solid #CCC; 
border-radius: 8px; 
box-shadow: rgba(0,0,0,0.04) 15px 15px; 
margin: 10px 10px 20px 30px; 
/* Opacity tricks */ 
-webkit-transition: opacity 800ms ease; 
-moz-transition: opacity 800ms ease; 
-o-transition: opacity 800ms ease; 
transition: opacity 800ms ease; 
} 

感謝あらかじめ！

Answer 1

doCallback(callback)のように、1つの引数callbackを受け入れることは明らかです。ここでもうまくいきません。

function doCallback(mainFn, callback) { 
    if (typeof mainFn === "function") { 
     mainFn(); 
    }   
    if (typeof callback === "function") { 
     callback(); 
    } 
} 

正しい方法は​​にコールバックを設定することで、あなたはあなたの巣に機能を必要としません。

function fadeOut (callback) { 
    for(var i=0; i<m_types.length; i++) { 
     if (document.getElementById(m_types[i]).className != 'selected') { 
      document.getElementById(m_types[i]).style.opacity = 0; 
     } else { 
      selection = m_types[i]; } 
     }; 
    // check if callback is function 
    if(typeof callback == 'function') callback(); 
} 

等を呼び出す：最後の行コール第二に、（第1、第2、）Argsのがdocallbackする

fadeOut(function(){ 
    // code; 
}); 

// or 

fadeOut(setupM); // note you don't need to pass() 

Answer 2

パス2

コールを、まず、第1の内側（第2）

を（）

Answer 3

まず、あなたのdoCallback関数は、単一のパラメータあなたが提供したコードでは、fadeOut関数だけです。したがってfadeOutは呼び出される唯一の関数です。

トランジションが完了したときにsetupM関数を呼び出すことが間違いない場合は、タイムアウトまたはtransitionEndイベントリスナーのいずれかを使用する必要があります。ケースであること、あなたのjavascriptのは、このようなものにするために書き換えることができることをhttps://developer.mozilla.org/en-US/docs/Web/Events/transitionend

から

element.addEventListener("transitionend", showMessage, false); 

：参照してください

function mformSubmit() { 
    fadeOut(); 
} 

function onTransitionEnd(event) 
{ 
    event.target.removeEventListener("transitionend", onTransitionEnd); 
    setupM(); 
} 

function fadeOut() { 
    for(var i=0; i<m_types.length; i++) { 
     el = document.getElementById(m_types[i]); 
     if (el.className != 'selected') { 
      element.addEventListener("transitionend", onTransitionEnd, false); 
      el.style.opacity = 0; 
     } else { 
      selection = m_types[i]; } 
     }; 
} 

function setupM() { 
    alert("I arrived in the setup function"); 
} 

がtransitionendは、すべてのブラウザでは動作しないことに注意してください、チェック上記のリンクのサポートテーブルを参照し、要件と比較してください。

上記のように、最初の遷移が完了した後に2番目の関数を実行することを前提としています（このインスタンスでは、フェードアウトしているすべての要素に対して実行されることに注意してください）。最初の関数の後に2番目の関数を実行したいだけなら、上記の答えがあなたに適しています。