我的重置功能上的 Javascript 异常功能（在井字游戏中）答案

【问题标题】：Javascript abnormal functionality on the my reset function (in tic tac toe game)我的重置功能上的 Javascript 异常功能（在井字游戏中）
【发布时间】：2018-02-26 16:35:30
【问题描述】：

我用 Javascript 创建了一个井字游戏。代码中有一个奇怪的问题。除非您按下重置按钮，否则它工作正常。如果您在开始时按下重置按钮，计算机将在板上放置多个“O”。例如：如果您按重置按钮 6 次，只要您输入第一个“X”，板上就会出现 6 个“O”。

请帮帮我这是我的代码笔： https://codepen.io/raj1998211/pen/rJwJWy?editors=1011

（如有疑问请追问）

<html>
<head>
    <title>Game</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="jquery.js"></script>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<h1>Tic Tac Toe</h1>
<div style="text-align: center;">
<!-- <button onclick="reset();">Reset</button> -->
</div>
<table>
    <tr>
        <td class="box" id="1" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="2" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="3" style="display: table-cell; text-align: center;"></td>
    </tr>
    <tr>
        <td class="box" id="4" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="5" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="6" style="display: table-cell; text-align: center;"></td>
    </tr>
    <tr>
        <td class="box" id="7" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="8" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="9" style="display: table-cell; text-align: center;"></td>
    </tr>
</table>

<div id="winner">
  <p id="winnerText">Winner will be here!!</p>
  <button onclick="reset();">Reset</button>
  <button onclick="reset();">Reset all</button>
</div>

<div id="start">
    <p>Select</p>
    <button id="cross" onclick="selector(this);">X</button>
    <button id="circle" onclick="selector(this);">O</button>
</div>

<script type="text/javascript" src="app.js"></script>


  </body>
</html>

var player;
function selector(elem){
    console.log(elem.id);
    $("#start").css("display", "none");
    player = elem.id;
    if(player === "cross"){

    }
    else if(player === "circle"){

    }
}

var px = [];
var po = [];
var winArr = [];

$(".box").on("click", newClick);

// function clkfun(){
//  if (turn === 2)
//  {
//      $(this).addClass("fa fa-times fa-3x");
//      $(this).unbind( "click" );
//      turn--;
//      px.push(Number(this.id));
//      if(res() === "x"){
//          alert("X won.");
//          reset();
//          $("#winner").text("X won");
//      }
//      return;
//  }
//  if (turn === 1)
//  {
//      $(this).addClass("fa fa-circle-o fa-3x");
//      $(this).unbind( "click" );
//      turn++;
//      po.push(Number(this.id));
//      if(res() === "o"){
//          alert("O won.");
//          reset();
//          $("#winner").text("O won");
//      }
//  }
// }

function newClick() {
    $(this).addClass("fa fa-times fa-3x");
    $(this).unbind("click");
    px.push(Number(this.id));
    gameover = false;
    if (res() === "x") {
        // alert("X won.");

        $("#winner").css("display", "block");
        $("#winnerText").text("X won");
        $(".box").unbind("click", newClick);
        gameover = true;
        //reset();
    }

    var test;
    if (px.length === 1) {
        test = generateRandom(1, 9);
    }
    else {
        test = position(px);
        if (test == 99) {
            // alert("Draw");
            $("#winner").css("display", "block");
            $("#winnerText").text("Draw !!");
            $(".box").unbind("click", newClick);
            // reset();
        }
    }

    if (gameover === false) {
        var stest = test.toString();
        $("#" + stest).addClass("fa fa-circle-o fa-3x");
        $("#" + stest).unbind("click");
        po.push(test);
        if (res() === "o") {
            // alert("O won.");
            // reset();
            // $("#winner").text("O won");
            $("#winnerText").text("O won");
            $("#winner").css("display", "block");
            $(".box").unbind("click", newClick);
        }
    }

}


function position(px) {
    if ((px.includes(1) && px.includes(2)) && !po.includes(3))
        return 3;
    if ((px.includes(1) && px.includes(3)) && !po.includes(2))
        return 2;
    if ((px.includes(1) && px.includes(4)) && !po.includes(7))
        return 7;
    if ((px.includes(1) && px.includes(7)) && !po.includes(4))
        return 4;
    if ((px.includes(1) && px.includes(5)) && !po.includes(9))
        return 9;
    if ((px.includes(1) && px.includes(9)) && !po.includes(5))
        return 5;

    if ((px.includes(2) && px.includes(3)) && !po.includes(1))
        return 1;
    if ((px.includes(2) && px.includes(5)) && !po.includes(8))
        return 8;
    if ((px.includes(2) && px.includes(8)) && !po.includes(5))
        return 5;

    if ((px.includes(3) && px.includes(2)) && !po.includes(1))
        return 1;
    if ((px.includes(3) && px.includes(6)) && !po.includes(9))
        return 9;
    if ((px.includes(3) && px.includes(9)) && !po.includes(6))
        return 6;
    if ((px.includes(3) && px.includes(5)) && !po.includes(7))
        return 7;
    if ((px.includes(3) && px.includes(7)) && !po.includes(5))
        return 5;

    if ((px.includes(4) && px.includes(7)) && !po.includes(1))
        return 1;
    if ((px.includes(4) && px.includes(5)) && !po.includes(6))
        return 6;
    if ((px.includes(4) && px.includes(6)) && !po.includes(5))
        return 5;

    if ((px.includes(6) && px.includes(5)) && !po.includes(4))
        return 4;
    if ((px.includes(6) && px.includes(9)) && !po.includes(3))
        return 3;

    if ((px.includes(7) && px.includes(8)) && !po.includes(9))
        return 9;
    if ((px.includes(7) && px.includes(9)) && !po.includes(8))
        return 8;
    if ((px.includes(7) && px.includes(5)) && !po.includes(3))
        return 3;

    if ((px.includes(8) && px.includes(9)) && !po.includes(7))
        return 7;
    if ((px.includes(8) && px.includes(5)) && !po.includes(2))
        return 2;

    if ((px.includes(9) && px.includes(5)) && !po.includes(1))
        return 1;


    else if (px.length + po.length != 9)
        return generateRandom(1, 9);
    else
        return 99;
}

function generateRandom(min, max) {
    var num = Math.floor(Math.random() * (max - min + 1)) + min;
    return (px.includes(num) || po.includes(num)) ? generateRandom(min, max) : num;
}

function reset() {
    $(".box").removeClass("fa fa-times");
    $(".box").removeClass("fa fa-circle-o");
    px = [];
    po = [];
    for (i = 0; i < winArr.length; i++) {
        var newId = winArr[i].toString();
        $("#" + newId).css("color", "black");
    }
    winArr = [];
    //$("#winnerText").text("Winner will be here!!");
    $("#winner").css("display", "none");
    $(".box").bind("click", newClick);
}

function line(arr, i, j, k) {
    if (arr.includes(i) && arr.includes(j) && arr.includes(k))
    {
        winArr.push(i,j,k);
        for(i = 0; i < winArr.length; i++){
            var newId = winArr[i].toString();
            $("#" + newId).css("color", "green");
        }
        // console.log(winArr);
        return true;
    }
    else
        return false;
}

function res() {
    if (line(px, 1, 2, 3) || line(px, 4, 5, 6) || line(px, 7, 8, 9) || line(px, 1, 5, 9) || line(px, 3, 5, 7) || line(px, 1, 4, 7) || line(px, 2, 5, 8) || line(px, 3, 6, 9)) {
        return "x";
    }
    else if (line(po, 1, 2, 3) || line(po, 4, 5, 6) || line(po, 7, 8, 9) || line(po, 1, 5, 9) || line(po, 3, 5, 7) || line(po, 1, 4, 7) || line(po, 2, 5, 8) || line(po, 3, 6, 9)) {
        return "o";
    }
    else
        return "raj";
}

css

.box {
    background-color: #ffffff;
    height: 100px;
    width: 100px;
    border: 3px solid black ;
}

table {
    margin: 50px auto;

}

#winner {
    text-align: center;
    margin-bottom: 20px;
}

h1 {
    text-align: center;
}

.fa-times {
    color: black;
}
.fa-circle-o {
    color: black;
}

#winner{
  background-color:grey;
  height: 200px;
  width: 200px;
  margin: auto;
  margin-top: -300px;
  display:none;
}
#winnerText{
  font-size:40px;
  margin:auto;
  font-weight:bold;
}

#start{
  background-color:grey;
  /* position: fixed; */
  height: 200px;
  width: 200px;
  margin: auto;
  margin-top: -300px;
  display:block;
}





/* for table */
table tr:first-child td{
  border-top:0;
}
table tr:last-child td{
  border-bottom:0;
}
table tr td:first-child{
  border-left:0;
}
table tr td:last-child{
  border-right:0;
}

【问题讨论】：

如果你做某件事 x 次，结果是 x 个输出，而我应该只有一个，这通常表明你是重复的绑定事件处理程序。
我怎样才能阻止它？
不要复制绑定事件处理程序。只绑定一次。查看代码时需要关注的一个方面是您将内联绑定与动态绑定混合在一起。您可能可以将它们全部更改为其中一个。我会建议动态绑定，以便它们都在一个地方并且可以管理。此外，如果您发现自己在逻辑中取消绑定和绑定事件处理程序，我建议您查看委托事件绑定，这将允许您根据“应用程序”的状态来操作子选择器以匹配或不匹配。
参考。 learn.jquery.com/events/event-delegation
它不适用于委托。这和我的问题类似吗？stackoverflow.com/questions/6361465/…

标签： javascript jquery function exception reset

【解决方案1】：

该问题是由于函数调用时多次绑定点击事件造成的。所以我在重置函数中添加了一行，它将首先取消绑定单击事件侦听器，然后它将绑定到以下几行

    function reset() {
       $(".box").off("click", newClick);
    .....
    .....
       $(".box").on("click", newClick);
    }

【讨论】：