Двойной щелчок дважды вызывает событие

Question

Я работаю над проектом викторины, где пользователь выбирает ответ с несколькими вариантами выбора (переключатель), а затем нажимает ссылку, чтобы перейти к следующему вопросу. Если радиокнопка не выбрана, ссылку не может быть нажата. После выбора переключателя и нажатия ссылки следующий вопрос извлекается из базы данных MySQL с использованием AJAX.

Проблема, с которой я сталкиваюсь, заключается в том, что если пользователь дважды щелкает по ссылке, вопрос пропускается. Так что если вы на вопрос 1 и дважды щелкните по ссылке, загрузится вопрос 3 вместо 2.

Есть ли способ в jQuery, чтобы сделать событие огнем только один раз, если ссылка одинарная или двойная щелчка?

Благодаря

$('#next-question-click').on("click", function(){ 
if ($('[name="radio-question"]').is(':checked')){ 
    var answer = $(".question-content ul li input:checked + label").text(); 
    question_number = question_number + 1; 

    if(question_number<100){ 
     next_question(question_number); 
    } 
} else { 
    $("#error-text").html('Please select an answer.'); 
} 
    return false; 
}) 

.on("dblclick", function(e){ 
    e.preventDefault(); //cancel system double-click event 
}); 

Answer 1

jQuery.one() функция то, что вы ищете.

Answer 2

Вместо того, чтобы разворачивать и переписывать события, я обычно использую переменную как флаг. Что-то вроде этого ...

var working = false; 
$('#next-question-click').on("click", function(){ 

    if (working) return false; //Dont do anything, basically. 

    if ($('[name="radio-question"]').is(':checked')){ 
     var answer = $(".question-content ul li input:checked + label").text(); 
     question_number = question_number + 1; 

     if(question_number<100){ 
      working = true; 
      next_question(question_number); 
     } 
    } else { 
     $("#error-text").html('Please select an answer.'); 
    } 

    return false; 
}) 

И, на функцию next_question, после загрузки на следующий вопрос и готов ответить, вы бы добавить working = false;

Answer 3

Вам просто нужно калитка выполнение путем добавления класс. Таким образом, ваш код будет выполняться только в том случае, если текущий вопрос не изменяется.

Теперь в идеале вы должны удалить активный класс из $('#next-question-click') в функции успеха вашего AJAX вызова, чтобы загрузить новый вопрос для обеспечения функции будет выполнять только после того, как новый вопрос был загружен

Преимущества добавления класса так, чтобы он не загрязнял глобальное пространство переменных, что касается того, какой класс добавить, это зависит от вас. Я просто использовал активный в качестве примера

$('#next-question-click').on("click", function() { 
    if (!$(this).hasClass('active')) { 
     if ($('[name="radio-question"]').is(':checked')) { 
      $(this).addClass('active'); 
      var answer = $(".question-content ul li input:checked + label").text(); 
      question_number++; 

      if (question_number < 100) { 
       next_question(question_number); 
       $(this).removeClass('active'); // this should go into the success/complete function of the ajax call 
      } 
     } else { 
      $("#error-text").html('Please select an answer.'); 
     } 
    } 

    return false; 
});