Google Chrome浏览器出现奇怪的JavaScript问题

Question

Basic idea is: The page gets ajax content from server based on Y or N press of user. I'm testing this PHP+JS based web application on Chrome V.31.0.1650.57 m browser. I decided to test this application, and started to press Y button. It works but... not often but in random times, chrome gives following error.

And there is no problem with php script:it returns answer every time in json encoded type. I really can't find the reason of problem. Any suggestions?

Code looks like that

Note: game is predefined var

var answer, question, timer, interval, counter;

$(document).ready(function() {
    startTimer(30);
    getQuestion();
    if (game == 1)
        counter = 5;
    else
        counter = 10;
    $("#show-answer-btn").click(function() {
        $('#res-btn img').fadeOut(1000);
        $('#answer').fadeIn(1000);
    })
})

function playSound(soundfile) {
    document.getElementById("sound").innerHTML =
            "<embed src=\"" + soundfile + "\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

window.onkeydown = function(e) {
    var code = e.keyCode ? e.keyCode : e.which;
    if (code === 89) {
        if (counter == 1) {
            playSound('assets/sounds/answerCorrect.mp3');
            $('#answer').fadeOut(300);
            $('#game-stats').fadeOut(300);
            $('#res-btn img').fadeOut(300);
            $("#green-flash").fadeIn(300);
            $('#question').html("You win");
            $("#green-flash").fadeOut(300);
            setTimeout(function() {
                window.location.href = "/";
            }, 5000);
        }
        else {
            playSound('assets/sounds/answerCorrect.mp3');
            $("#green-flash").fadeIn(300);
            $("#green-flash").fadeOut(300);
            $('#answer').fadeOut(300);
            $('#res-btn img').fadeIn(300);
            getQuestion();
            startTimer(30);
        }

    } else if (code === 78) {
        $("#red-flash").fadeIn(300);
        $("#red-flash").fadeOut(300);
        $('#game-stats').fadeOut(300);
        playSound('assets/sounds/answerWrong.mp3');
        $('#question').html("Wrong");
        setTimeout(function() {
            window.location.href = "/";
        }, 5000);
    }
};


function getQuestion() {
    counter--;
    $.ajax({
        type: "post",
        url: "/question/get",
        data: "diff=" + game,
        dataType: 'json',
        success: function(data) {
            $("#question").html(data.question);
            $("#answer").html(data.answer);
        }
    });

}


function startTimer(timer) {
    clearInterval(interval);
    interval = setInterval(function() {
        timer--;
        $('#timer').html(timer);
        if (timer == 0) {
            clearInterval(interval);
            $('#question').html("Time ended");
            setTimeout(function() {
                window.location.href = "/";
            }, 5000);
            return false;
        }
    }, 1000);
}

Answer 1

I had this problem too but in other ways! Having multiple timers can cause many problems such as page decrease in page rendering speed. You can set your timers to be more dependently on each other, rather that independent!