Остановка интервала и сброс нажатием другой кнопки во время интервала

Я хочу реализовать интервал, в котором число увеличивается при нажатии кнопки.

Есть несколько кнопок и один элемент с возрастающим номером.

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

Пожалуйста, помогите мне.

HTML

<ul> 
  <li><a href = "javascript:;" class = "btn" data-length = "3">1</a></li>
  <li><a href = "javascript:;" class = "btn" data-length = "8">2</a></li>
  <li><a href = "javascript:;" class = "btn" data-length = "5">3</a></li>
</ul>
<div class = "counter">0</div>

const interval = (e) => {
  setTimeout(() => { 
    $('.counter').html(e)
  }, 500 * e);
}

$('.btn').on('click', function(){
  var $this = $(this),
      length = $this.data('length');

  for (let i = 1; i <= length; i++) {
    (function(e){
        interval(e)
    })(i)
  }
})

ДЕМО: https://jsfiddle.net/bnzLrg03/7/

javascript html jquery settimeout

12.12.2020 04:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

123

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

const interval = (e) => {
  window.sT = setTimeout(() => { 
    $('.counter').html(e)
  }, 500 * e);
}

.. и таким образом вы можете очистить таймер, используя clearTimeout(sT)

Собираем все вместе

const interval = (e) => {
  window.sT = setTimeout(() => { 
    $('.counter').html(e)
  }, 500 * e);
}

$('.btn').on('click', function(){
  if (window.sT) clearTimeout(window.sT);
  var $this = $(this),
      length = $this.data('length');

  for (let i = 1; i <= length; i++) {
    (function(e){
        interval(e)
    })(i)
  }
})

Однако я действительно не уверен, почему вы здесь перебираете значение length. Я бы предложил использовать setInterval вместо setTimeout

Обновление решения с использованием setInterval и удалением ненужных переменных

const interval = (e) => {
  let i = 1;
  window.sT = setInterval(() => { 
    $('.counter').html(i++)
    if (i > e) clearInterval(sT);
  }, 1000);
}

$('.btn').on('click', function(){
  if (window.sT) clearTimeout(window.sT);
  interval($(this).data('length'))
})

const interval = (e) => {
  let i = 1;
  window.sT = setInterval(() => { 
    $('.counter').html(i++)
    if (i > e) clearInterval(sT);
  }, 1000);
}

$('.btn').on('click', function(){
  if (window.sT) clearTimeout(window.sT);
  interval($(this).data('length'))
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href = "javascript:;" class = "btn" data-length = "3">1</a></li>
  <li><a href = "javascript:;" class = "btn" data-length = "8">2</a></li>
  <li><a href = "javascript:;" class = "btn" data-length = "5">3</a></li>
</ul>

<div class = "counter">0</div>

Спасибо за ответ! Но это все еще не ясно. Timeout. TT Улучшится ли это, если я сделаю его setInterval? Я попробую!

— 12.12.2020 05:21

О, интервал был ответом! Большое спасибо!!

— 12.12.2020 06:04

12.12.2020 05:04