我试图理解回调，但我遇到了麻烦。我有下面的代码，函数没有按正确的顺序调用。在棋盘上播放作品之前，警报会弹出。我感到困惑，因为当我在Chrome开发者控制台中休息时，我可以进入回调功能，它可以正常工作。
$(document).ready(function() {
var players = 0;
var p1Piece = '';
var moves = 0;
var p1Wins = 0;
var p2Wins = 0;
var draws = 0;
var question = $(".questions");
var option1 = $(".one");
var option2 = $(".two");
var markerVal = '';
var board = ['a','b','c','d','e','f','g','h','i'];
var x = true;
var cornerZero = $(".cornerZero");
var edgeOne = $(".edgeOne");
var cornerTwo = $(".cornerTwo");
var edgeThree = $(".edgeThree");
var center = $(".center");
var edgeFive = $(".edgeFive");
var cornerSix = $(".cornerSix");
var edgeSeven = $(".edgeSeven");
var cornerEight =$(".cornerEight");
$(".player").on("click", function() {
//store number of players if first click, then change question to X or O
if (players == 0) {
players = $(this).text();
option1.text("X");
option2.text("O");
$(".question").text("What will Player 1 play?");
}
//find which marker player 1 will be playing with
else {
markerVal = $(this).text();
p1Piece = $(this).text();
$(".question").css("display", "none");
option1.css("display", "none");
option2.css("display", "none")
$(".board-holder").css("visibility", "visible");
$(".player1").text("Player 1 wins: " + p1Wins);
$(".draws").text("Draws: " + draws);
if (players == 1) {
$(".player2").text("Computer wins: " + p2Wins);
}
else {
$(".player2").text("Player 2 wins: " + p2Wins);
}
}
});
cornerZero.on("click", function() {
if ($(this).hasClass("clickable")) {
var temp = placeMarker(cornerZero, 0, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
edgeOne.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(edgeOne, 1, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
cornerTwo.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(cornerTwo, 2, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
edgeThree.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(edgeThree, 3, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
center.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(center, 4, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
edgeFive.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(edgeFive, 5, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
cornerSix.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(cornerSix, 6, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
edgeSeven.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(edgeSeven, 7, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
cornerEight.on("click", function() {
if ($(this).hasClass("clickable")) {
placeMarker(cornerEight, 8, boardAnalysis);
$(this).removeClass("clickable");
}
else {
return;
}
});
function placeMarker(square, location, callback) {
if (x) {
square.html("<span class='marker'>X</span>");
board[location] = 'X';
}
else {
square.html("<span class='marker'>O</span>");
board[location] = 'O';
}
x = !x;
moves++;
callback();
}
function boardAnalysis() {
if (board[0] == board[1] && board[1] == board[2]) {
newGame();
}
else if (board[0] == board[3] && board[3] == board[6]) {
alert("winner");
newGame();
}
else if (board[0] == board[4] && board[4] == board[8]) {
alert("winner");
newGame();
}
else if (board[1] == board[4] && board[4] == board[7]) {
alert("winner");
newGame();
}
else if (board[2] == board[5] && board[5] == board[8]) {
alert("winner");
newGame();
}
else if (board[2] == board[4] && board[4] == board[6]) {
alert("winner");
newGame();
}
else if (board[3] == board[4] && board[4] == board[5]) {
alert("winner");
newGame();
}
else if (board[6] == board[7] && board[7] == board[8]) {
alert("winner");
newGame();
}
else if (moves == 9) {
alert("draw");
newGame();
}
else {
return;
}
}
function newGame() {
$("table.board td").html("");
moves = 0;
board = ['a','b','c','d','e','f','g','h','i'];
$("td").each(function() {
if ($(this).hasClass("clickable")) {
}
else {
$(this).addClass("clickable");
}
});
}
});