jquery set counter внутри функции, которая называется сама по себе

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/

P.S. Существует еще один ответ, который предполагает отключение события от кнопки, а затем повторное его повторение после перезагрузки. Это тоже вариант, но пока у вас есть одна статическая кнопка и одно статическое поле - сохраняйте ресурсы и не связывайте/отключайте событие каждый раз, когда вы отвечаете на новый вопрос.

Лучшие