调试Javascript中的回调函数:第二个函数未到达

Debugging callback functions in Javascript: second function isn't reached

本文关键字：函数 第二个 调试 回调 Javascript      更新时间：2023-09-26

我正在用香草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;
}

提前感谢!

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

传递2个参数给docallback(first,second)

调用第一(第二)

inside first, on last line call second()

首先，您的doCallback函数只期望一个参数，在您提供的代码中，它只是淡出函数。所以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并不是在所有浏览器中都能工作，请查看上面链接中的支持表，并将其与您的需求进行比较。

如上所述，所有这些都假设您希望在初始转换完成后运行第二个函数(并且请记住，在本例中，它将为您正在淡出的每个元素运行)。如果您只想让第二个函数在第一个函数之后运行，那么上面的答案将更适合您。

相关文章：