Отладка функций обратного вызова в Javascript: вторая функция не достигнута

Question

Я пишу веб-сайт в javascript vanilla (не могу использовать JQuery), где я написал небольшую функцию fadeOut с javascript и CSS. Я бы хотел, чтобы fadeOut закончил до вызова следующей функции. Для этого я пытаюсь использовать функцию обратного вызова - единственная цель этой функции - обеспечить, чтобы первая функция завершилась до вызова второй. Я прочитал несколько учебников, но не могу понять, что я делаю неправильно - я никогда не прийти второй функции:

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

Answer 2

проход 2 Args в docallback (первый, второй)

вызов первой (второй)

внутри первой, на последней строке вызова второй()

Answer 3

Ну, во-первых, функция 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 не будет работать во всех броузера, проверка таблицу поддержки в приведенной выше ссылке и сравнить ее с вашими требованиями.

Все это предполагает, как я сказал выше, о том, что вы хотите, чтобы вторая функция запускалась после завершения первоначального перехода (и помните, что она будет работать для каждого элемента, который вы исчезаете, в этом случае). Если вы просто хотите, чтобы вторая функция запускалась после первого, то приведенные выше ответы подойдут вам лучше.