в чем ошибка, что при клике должен включится новый таймер а старый отключится а получается все перемешанно

Question

если выполнить код в первом блоке должны появляться вопросы по порядку по истечении времени, но если не дождаться и клацнуть посмотрите что получается

$(".next").click(function () {
  var numberQuestion = $(this).data('order');
  var wrapBlock = $('.wrap-block-test');
  var questionDiv;
  
  const secondsToAnswer = 5; // Количество секунд для ответа
    let timeLeft = secondsToAnswer;
    clearInterval(this.timer);
    this.timer = setInterval(function() {
        if (timeLeft > 0) { // На последней секунде
            $('.display').text(timeLeft + ' сек');
            timeLeft--;
        } else {
            $('.display').text(0 + ' сек');
            clearInterval(this.timer);
            $('.next_'+numberQuestion).click();
            
        }
    }, 1000);
    
    if(!numberQuestion) {
       //значит это вступительный вопрос
       numberQuestion = 0;
    }
    
    numberQuestion++;
    
    //клонируем вопрос
    questionDiv = $('.question_'+numberQuestion).clone(true);
            questionDiv.find('.next').addClass('next_'+numberQuestion);
            //заменяем его тюе показываем следующий вопрос
            wrapBlock.html(questionDiv);
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap-timer-test">
                    <div id="countdown">
                      <h1><span class="display">5</span></h1>
                    </div>
                </div>
<div id="major" class="wrap-block-test">
  <div class="block-test question_0">
    <h2>вступительный вопрос</h2>
    <button type="button" data-order="0" data-a="btn" class="btn btn-info btn-block next">Start test</button>
  </div>
</div>

<!-- блок откуда клонируем вопросы-->

<div class="test hidden">
  <div class="block-test question_1">
    <h2>Вопрос1</h2>
    <button type="button" data-order="1" class="btn btn-info btn-block next">Next</button>
  </div>
  <div class="block-test question_2">
    <h2>Вопрос2</h2>
    <button type="button" data-order="2" class="btn btn-info btn-block next">Next</button>
  </div>
  <div class="block-test question_3">
    <h2>Вопрос3</h2>
    <button type="button" data-order="3" class="btn btn-info btn-block next">Next</button>
  </div>
</div>

Answer 1

Во первых, таймер должен быть один глообальный на все вопросы. Во вторых, с помощью JQuery можно существенно упростить навигацию.

А вообще, я бы сделал одну кнопку "Next"... Но это уже совсем другая история!

var wrapBlock = $('.wrap-block-test');
var buttons = $('.next');

const secondsToAnswer = 5; // Количество секунд для ответа
var timerID;

function end() {
  $('.display').text('-');
  wrapBlock.html("Это фиаско, братан!");
}

function run(order) {
  // останавливаем таймер
  if (timerID) {
    clearInterval(timerID);
  }

  if (order >= buttons.length) {
    // если следущего вопроса нет, тогда конец
    end() 
  } else {
    // если следущий вопрос есть, тогда продолжим

    // клонируем вопрос и показываем
    wrapBlock.html(buttons.filter('[data-order="' + order + '"]').closest('.question').clone(true));
    
    // запускаем таймер
    var timeLeft = secondsToAnswer;
    $('.display').text(timeLeft + ' сек');
    timerID = setInterval(function() {
      timeLeft--;
      if (timeLeft > 0) {
        $('.display').text(timeLeft + ' сек');
      } else {
        $('.display').text(0 + ' сек');
        clearInterval(timerID);

        // запускаем следующий вопрос
        run(order + 1);
      }
    }, 1000);  
  }
}

function onClick(event) {
  // определяем номер текущего вопроса (если неопределен, то 0)
  var order = parseInt($(this).data('order')) || 0;
  
  // запускаем следующий вопрос
  run(order + 1);

  event.preventDefault();
}
  
buttons.click(onClick);

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1><span class="display">-</span></h1>

<div id="major" class="wrap-block-test">
  <div class="block-test question">
    <h2>Вступительный вопрос</h2>
    <button type="button" data-order="0" data-a="btn" class="btn btn-info btn-block next">Start test</button>
  </div>
</div>

<!-- блок откуда клонируем вопросы-->

<div class="test hidden">
  <div class="block-test question">
    <h2>Вопрос 1</h2>
    <button type="button" data-order="1" class="btn btn-info btn-block next">Next</button>
  </div>
  <div class="block-test question">
    <h2>Вопрос 2</h2>
    <button type="button" data-order="2" class="btn btn-info btn-block next">Next</button>
  </div>
  <div class="block-test question">
    <h2>Вопрос 3</h2>
    <button type="button" data-order="3" class="btn btn-info btn-block next">Next</button>
  </div>
</div>

БЛОГ НА HUSL

в чем ошибка, что при клике должен включится новый таймер а старый отключится а получается все перемешанно

Ответы (1 шт):