javascript - 调试Javascript中的回调函数: second function isn't reached

Question

我正在用普通的 javascript 编写一个网站(不能使用 JQuery)，其中我用 javascript 和 CSS 编写了一些淡出函数。我希望淡出在调用下一个函数之前完成。为此，我尝试使用回调函数 - 该函数的唯一目的是确保第一个函数在调用第二个函数之前完成。我已经阅读了几个教程，但无法弄清楚我做错了什么——我从未到达第二个函数:

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)，很明显它接受一个参数callback。这是仍然不起作用的修复。

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

正确的方法是在fadeOut()上设置回调，并且不需要嵌套函数。

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 ()