Tic Tac Toe game not reseting properly (jQuery)


#1

I'm almost done creating a Tic Tac Toe game. When the game is over I call a reset function to start over, but when I try to play the game again the computer has already taken two turns automatically. I am reassigning all my variables to their original values so not sure what I'm doing wrong. I'm using pug/jade for the HTML just fyi, but I don't think it's relevant to the problem.

Here's the link to the full project http://codepen.io/tyl-er/pen/QpBErL?editors=0010

//1. create an array that store values to chech for winner
//2. allow player to select turn
//3. switch turns from x to o
//4 create function to display players turn
//a. and for computer to take it's turn

$(document).ready(function() {
    $(".box3,.box2").hide();
    //defult to x
    var turn = "X"

    var computersTurn = "O"
        //stores values to check for winner
    var turns = ["#", "#", "#", "#", "#", "#", "#", "#", "#"]
        //keeps track of turn
    var gameOn = false
        //no ininite loops
    var count = 0;

    //change players turn
    $('#chooseX').click(function() {
        turn = "X";
        computersTurn = "O";
        $(".box1").fadeOut();
        $(".box2").fadeIn();
        reset();
    });
    $('#chooseO').click(function() {
        turn = "O";
        computersTurn = "X";
        $(".box1").fadeOut();
        $(".box2").fadeIn();
        reset();
    });
    
    function computerTurn (){
        var taken=false;
        while(taken===false && count!==5){
            //computers random turn
            var computersMove=(Math.random()*10).toFixed();
            var move=$("#"+computersMove).text();
            if(move==="#"){
                setInterval(function(){$("#"+computersMove).text(computersTurn);},500)
                taken=true;
                turns[computersMove]=computersTurn;
            }
            
        }
    }

    function playerTurn(turn, id) {
        var spotTaken = $("#" + id).text();
        if (spotTaken === "#") {
            count++;
            turns[id] = turn;
            $("#" + id).text(turn);
            winCondition(turns, turn);
            if (gameOn===false) {
                computerTurn();
                winCondition(turns, computersTurn);
            }
        }
    }

    //function compares turns array to turns taken to find winner.
    
    function winCondition(turnArr, currTurn) {
        if (turnArr[0] === currTurn && turnArr[1] === currTurn && turnArr[2] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else if (turnArr[3] === currTurn && turnArr[4] === currTurn && turnArr[5] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else if (turnArr[6] === currTurn && turnArr[7] === currTurn && turnArr[8] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else if (turnArr[0] === currTurn && turnArr[3] === currTurn && turnArr[6] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else if (turnArr[1] === currTurn && turnArr[4] === currTurn && turnArr[7] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else if (turnArr[2] === currTurn && turnArr[5] === currTurn && turnArr[8] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else if (turnArr[0] === currTurn && turnArr[4] === currTurn && turnArr[8] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else if (turnArr[2] === currTurn && turnArr[4] === currTurn && turnArr[6] === currTurn) {
            gameOn = true;
            $(".winner").html("Player "+turn+ " wins!");
            $(".box2").fadeOut();
            $(".box3").fadeIn();
            setInterval(function(){reset();},4000)
        } else {
            gameOn=false;
        }
    }

    //Shows player move
    $('.tac').click(function() {
        var slot = $(this).attr('id');
        playerTurn(turn, slot);
    });
    //restart game
    function reset() {
        turns = ["#", "#", "#", "#", "#", "#", "#", "#", "#"];
        turn = "X";
        computersTurn = "O";
        count = 0;
        $('.tac').text("#");
        gameOn = false;
        $(".box3").fadeOut();
        $(".box1").fadeIn();
    }
    console.log(turns);
});

#2

I figured this one out on my own. If you're curious I was using setInterval when I meant to use SetTimeout.