功能問題，點擊多次點擊（）多次

Question

我有一個項目的問題，我正在做; https://codepen.io/argestis/pen/gLraBq?editors=0001

我有一個功能，那就是一個西蒙說的遊戲。到目前爲止，我想將顏色值推入數組，然後將該數組與該函數進行比較。一切工作，直到我清空我用來推送用戶應該從GIU輸入的值的數組的值，當我回到功能GameOn()，我嘗試開始推動多次點擊觸發值。

以下是參考函數，但在上面共享的codepen的控制檯上，您可以看到我收到的錯誤。

function gameOn() { 
    game.blue.on("click", function() { 

     game.guessWhat.push(1); 
     console.log("I were at blue") 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 

    }); 

    game.red.on("click", function() { 
     console.log("I were at red") 
     game.guessWhat.push(2); 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 
    }); 

    game.green.on("click", function() { 
     console.log("I were at green") 
     game.guessWhat.push(3); 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 
    }); 

    game.yellow.on("click", function() { 
     console.log("I were at yellow") 
     game.guessWhat.push(4); 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 


    }); 
} 

謝謝你的時間，夥計！

Answer 1

您註冊多個調用verifySequence當在同一項目 'click' 事件（）。您可以點擊註銷登記之前就事件解決

//problem in verifySequence() 
 
function verifySequence() { 
 
... 
 
    if (verify) { 
 
    console.log("this is game.guessWhat: " + game.guessWhat); 
 
    //when you call nextRound() you register click event on the same item (multiple times) 
 
    nextRound(); 
 
    } else { 
 
    clearUser(); 
 
    } 
 
} 
 
} 
 

 

 
//making sure to unregister 'click' event before add one 
 
game.blue.off("click").on("click", function() { 
 
    ... 
 
}); 
 

 
game.red.off("click").on("click", function() { 
 
    ... 
 
}); 
 

 
game.green.off("click").on("click", function() { 
 
    ... 
 
}); 
 

 
game.yellow.off("click").on("click", function() { 
 
    ... 
 
});

Answer 2

塞爾吉奧。每次我清空數組中的值時，我都會調用函數gameOn（）。我正在推動新一輪的序列。但是當我點擊一次任何按鈕的按鈕觸發，直到與我用來比較西蒙序列的其他數組的長度相同。

function nextRound(){ 

game.guessWhat = []; 
game.count.push(Math.floor((Math.random() * 4) + 1)) 
console.log("this is game.count: " + game.count) 
console.log("this is game.guessWhat inside nextRound function: " + game.guessWhat) 
gameOn(); 

} 


function verifySequence(){ 

verify = true; 

console.log("this is game.guessWhat entering verifySequence function: " + game.guessWhat) 
    for(var i = 0; i < game.count.length; i++){ 
    if(game.count[i] !== game.guessWhat[i]){ 
     verify = false; 
    } 

    } 

if(verify == true){console.log("this is game.guessWhat: " + game.guessWhat); nextRound(); } 
else{clearUser();} 
} 

而這是遊戲對象;

var game = { 
count : [], 
guessWhat : [], 
red : $("#red"), 
blue : $("#blue"), 
green : $("#green"), 
yellow : $("#yellow") 
}; 

Answer 3

總是綁定一次，在任何函數調用之外單擊，並在ready（）上做好準備。 在當前的gameOn（）方法中，您會綁定click，因此可能會多次看到它被觸發。從gameOn（）中移除它。

綁定點擊如下，

$(document).ready(function(){ 
game.blue.on("click", function() { 

    game.guessWhat.push(1); 
    console.log("I were at blue") 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 

}); 

game.red.on("click", function() { 
    console.log("I were at red") 
    game.guessWhat.push(2); 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 


}); 

game.green.on("click", function() { 
    console.log("I were at green") 
    game.guessWhat.push(3); 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 


}); 

game.yellow.on("click", function() { 
    console.log("I were at yellow") 
    game.guessWhat.push(4); 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 
    }); 
});