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

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

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

Answer 2

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

这是一个fiddle： http://jsfiddle.net/pmjmny49/10/

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

最佳

Answer 3

老实说，当您进行递归时，我会将 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();
    }

});

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

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

jquery set counter within the function which is called by itself

jquery

function

counter

jquery-callback