jquery在自己调用的函数中设置计数器

Question

我尝试计算给定答案的正确和错误。 计数发生在用户单击按钮后的 if else 构造中。

(function keerSom(){


//generate and put a random number between 1 and 10 
a = Math.floor((Math.random() * 10) + 1);
$(".a").html(a);

//get the variable b
b = $(".b").text().trim();

//get the cursor inside the input field and set the input field clean
userInputBox.focus();
$("#userAnswer").val("");


//make the calculations and check
next.click(function() {

$("form").submit(function( event ) {
event.preventDefault();
});

result = a*b;
userInput = $("#userAnswer").val();


//check if the answer was correct
if (result == userInput){
userInputBox.removeClass("incorrect");
userInputBox.addClass("correct");
//set count of correct 
correct++;
$("#correct").html(correct);

如果答案是正确的，我需要为用户继续下一个任务（这意味着回到函数的开头）

//go for anothe som
 setTimeout(function(){
 userInputBox.removeClass("correct");
 keerSom();
 }, 3000);
}else{
userInputBox.addClass("incorrect");
//set counter of incorrect
incorrect++;
$("#incorrect").html(incorrect);
userInputBox.focus();
}

});

})();

你可以在这里看到我想要做什么http://jsfiddle.net/pmjmny49/9/

问题是计数器工作错误。它按级数计算，不是加 1，而是加 2，然后是 4，以此类推。

我无法弄清楚我做错了什么。当然是因为回调函数本身......但我不知道我该怎么做才能让它工作。

如果有人可以提供帮助，请解释发生了什么，我将不胜感激！

提前致谢！

Answer 1

当您获得递归时，我会诚实地将 keerSom() 函数与单击处理程序分开。每次单击下一个按钮时，该函数运行的次数与应用到该按钮的次数一样多，这是您单击该按钮的次数的乘数。将这两者分开将防止这种情况发生。 DEMO

var a = 0;
var b = 0;
var correct = 0;
var incorrect = 0;

var userInputBox = $("#userAnswer");
var next = $("#next");

var keerSom = function () {

    //generate and put a random number between 1 and 10 
    a = Math.floor((Math.random() * 10) + 1);
    $(".a").html(a);

    //get the variable b
    b = $(".b").text().trim();

    //get the cursor inside the input field and set the input field clean
    userInputBox.focus();
    userInputBox.val("");

};

keerSom();
$("form").submit(function (event) {
    event.preventDefault();
});

next.click(function () {

    var result = a * b;
    var userInput = userInputBox.val();

    //check if the answer was correct
    if (result == userInput) {
        userInputBox.removeClass("incorrect");
        userInputBox.addClass("correct");

        //set count of correct 
        correct++;
        $("#correct").html(correct);

        //go for another
        setTimeout(function () {
            userInputBox.removeClass("correct");
            keerSom();
        }, 500);

    } else {
        userInputBox.addClass("incorrect");
        //set counter of incorrect
        incorrect++;
        $("#incorrect").html(incorrect);
        userInputBox.focus();
    }

});

希望这会有所帮助！如果您有任何问题，请告诉我。

Answer 2

在你的 setInterval 中，你调用了一个 keerSom 函数，它有一个绑定函数，这意味着一个 dom 可以为一种事件绑定两次或多次。解决方案是在重新绑定事件之前取消绑定所有事件

setTimeout(function(){
 userInputBox.removeClass("correct");
   next.unbind(); 
 keerSom();
 }, 2000);

Answer 3

每次调用keerSom() 时，它都会在元素上绑定事件。只需隔离问题生成逻辑，不要在每次重新加载问题时在同一个按钮上绑定越来越多的事件。

这是一个小提琴： http://jsfiddle.net/pmjmny49/10/

附：还有另一个答案建议从按钮取消绑定事件，然后在重新加载后重新绑定它。这也是一种选择，但是当您有一个静态按钮和一个静态字段时 - 节省资源并且每次回答新问题时不要绑定/取消绑定事件。

最好的