関数を呼び出すとコールバックが機能しない

Question

私はログインをチェックし、いくつかの異なることを実行する関数を持っています。次に、その関数をページの後半に呼び出すと、それが成功した後に別の関数を実行しようとしています。たぶん私の構造が正しくないかもしれませんが、私はかなり動き回ってみましたが、何も変わっていないか、コードが壊れているようです。たぶん、これはこれに最善の方法ではありません。何か案は。

function callLogin(callback) { 
    if (document.getElementById("userLoggedIn") === null) { 
    $(".cover").fadeIn(200, function() { 
     $(".sixPinInputContainer").fadeIn(200, function() { 
     $('.sixPinInput').first().focus() 
     $("#pageBody").css("overflow", "hidden"); 
     var failedAttempts = 0; 
     var password = ""; 
     $('.sixPinInput').keyup(function(k) { 
      //DATA ENTERED INTO FIELD 
      if (this.value.length == this.maxLength) { 
      password = password + this.value; 
      $(this).next('.sixPinInput').focus(); 
      } 
      //PRESSING DELETE 
      if (k.keyCode == 8) { 
      $(this).prev().val("").focus(); 
      password = password.slice(0, -1); 
      } 
      password = password.substring(0, 6); 
      $(".pinIncorrectMessage").css("display", "none"); 
     }); 
     $("#f").keyup(function(callback) { 
      if ($("#f").val().length > 0) { 
      $.post("http://heber/QC/includes/pinInput/getUserInfo.php", { 
       user: password 
      }, function(data, status) { 
       password = ""; 
       $(".sixPinInput").val(""); 
       $(data).each(function(index, value) { 
       var firstName = value.firstName; 
       var color1 = value.color1; 
       var color2 = value.color2; 
       var authorizationLevel = value.authorizationLevel; 
       var something = value.something; 

       //IF SUCCESSFUL LOGIN 
       if (firstName) { 
        $(".cover").fadeOut(200); 
        $(".sixPinInputContainer").fadeOut(200); 
        $("#pageBody").css("overflow", "scroll"); 
        $("#userName").html(firstName); 
        $("#pageBody").css("background", "radial-gradient(at top left," + color1 + "," + color2 + ")"); 
        $("#userSession").html("<div id='userLoggedIn'></div>"); 
        password = ""; 
       } 
       //IF FAILED LOGIN 
       if (!firstName) { 
        $(".pinIncorrectMessage").css("display", "block"); 
        $(".sixPinInput").first().focus(); 
        $(".sixPinInput").val(""); 
        $("#userName").html(firstName); 
        $("#pageBody").css("background", "radial-gradient(at top left," + color1 + "," + color2 + ")"); 
        password = ""; 
        failedAttempts = failedAttempts + 1; 
        if (failedAttempts >= 3) { 
        alert("If you forgot your password Please have it reset, You have " + (6 - failedAttempts) + " more Attempts"); 
        }; 
        if (failedAttempts >= 6) { 
        $(".cover").css("background-color", "black").css("z-index", "2000").css("cursor", "none"); 
        } 
       } 
       }) 
      }) 
      } 
     }) 
     }); 
    }); 
    }; 
    callback(); 
}; 

ここで私は関数を呼び出し、ログインが完了する前にコードを実行します。

callLogin(function() { 
    $("#" + rowID).load("eventHandlersPHP/updateStart.php", { 
    roomID: id }, function(data, status) { 
     $("#notStartedCount").load("eventHandlersPHP/jobsNotStartedCount.php"); 
    }); 
}); 

Answer 1

あなたの要求が完了した時点までcallbackの呼び出しを移動してみてください：

//IF SUCCESSFUL LOGIN 
if (firstName) { 
    $(".cover").fadeOut(200); 
    $(".sixPinInputContainer").fadeOut(200); 
    $("#pageBody").css("overflow", "scroll"); 
    $("#userName").html(firstName); 
    $("#pageBody").css("background","radial-gradient(at top left," + color1 + "," + color2 + ")"); 
    $("#userSession").html("<div id='userLoggedIn'></div>"); 
    password = ""; 

    callback(); 
}