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()时，它都会绑定元素上的事件。只需隔离问题生成逻辑，每次重新加载问题时都不要在同一个按钮上绑定越来越多的事件。

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

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

最佳

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在自己调用的函数内设置计数器

3 个答案: