在Javascript中調試回調函數：沒有達到第二個函數

我正在寫一個香草javascript的網站（不能使用JQuery），我已經用javascript和CSS編寫了一個fadeOut函數。我希望fadeOut在下一個函數被調用之前完成。爲此，我試圖使用回調函數 - 該函數的唯一目的是確保第一個函數在第二個函數被調用之前完成。我讀過一些教程，但無法弄清我做錯了 - 我絕不會在第二個函數到達：在Javascript中調試回調函數：沒有達到第二個函數

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; 
}

謝謝提前！

來源

2016-08-13 totallygloria

'doCallback'只能識別一個參數。傳入的第二個函數被忽略。 –

你可能會回答這個問題:) –

似乎沒有任何需要回調，它都是同步的，你的回調不會等待CSS動畫完成？ – adeneo

doCallback(callback)，很明顯它接受一個參數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(); 
}

並調用它喜歡：

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

// or 

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

來源

2016-08-13 22:32:15

謝謝亞當！我讀取和仿真的例子有一個外部回調函數，實際上我希望fadeOut函數本身執行回調。您的修復程序完全按照我想編寫代碼的方式工作。：D – totallygloria

不客氣:) –

通2參數以docallback（第一，第二）

呼叫第一（第二）

第一內側，上最後一行呼叫第二（）

來源

2016-08-13 22:32:49

首先您的doCallback功能只需要一個參數在你提供的代碼中，它只是fadeOut函數。所以fadeOut是唯一被調用的函數。

如果我在正確理解要在轉換完成時調用函數setupM，則需要使用超時或transitionEnd事件偵聽器。請參閱：

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

從https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

既然如此，你的JavaScript可以改寫爲這樣的：

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不會在所有的瀏覽器，檢查工作上面鏈接中的支持表並將其與您的要求進行比較。

正如我上面所說的，所有這些都假定您想在第一次轉換完成後運行第二個函數（並且要記住，它將針對您正在淡出的每個元素運行，在這種情況下）。如果你只是想在第一個函數之後運行第二個函數，那麼上面的答案會更適合你。

來源

2016-08-13 22:36:57

在Javascript中調試回調函數：沒有達到第二個函數

回答

相關問題