Не срабатывает clearInterval в JS

Question

По задумке, при нажатии на кнопку должны проматываться рандомные числа и по истечении некоторого времени на одном числе остановиться. Не прекращает генерировать и показывать числа, в этом проблема. Думаю что-то с if или clearInterval. Если выношу var time за функцию, то при нажатии на кнопку ничего не происходит :c

function buttonclick(button) {
  var counter = 0;
  var time = setInterval("buttonclick(this)", 10)
  counter++;
  let p1 = Math.ceil(Math.random() * 100);
  document.getElementById("p1").innerHTML = p1;
  if (counter == 50) clearInterval(time);
}

<input type="button" name="b" value="click me" onclick="buttonclick(this)" />
<div id="p1"></div>

Answer 1

HTML:

<button onclick="startCounter('#p1')">Press me</button>
<div id="p1"></div>

JS:

function startCounter(elem) {
  var counter = 0;
  while (counter<50) {
    setTimeout(function(){
        document.querySelector(elem).innerHTML=Math.ceil(Math.random()*100);
    },20*counter);
    counter++;
  }
}

Пример на JSFiddle

Answer 2

У тебя каждый клик по кнопке - создается новый таймер, да и вообще каунтер не каунтит, ибо тоже создается каждый клик с нулем и лыжи не едут

Помимо этого лишняя кавычка в html, перед type

Вот рабочий "хороший" код, таймеры зло, лучше вариант под снипетом возьми во внимание

const buttonclick=(btn)=>{
    let counter = 0;
    const time = setInterval(()=>{
        counter++; 
        console.log('do click', counter);
        const p1 = Math.ceil(Math.random()*100);
        document.getElementById('p1').innerHTML = p1;
        if(counter === 50)clearInterval(time);
    }, 100);
};

<input type="button" name="b" value="click me" onclick="buttonclick(this)"/>
<span id="p1"></span>

И я бы вообще как-то так сделал:

const sleep=(ms)=>new Promise((r)=>setTimeout(r, ms));

const pone=()=>Math.ceil(Math.random()*100);

let started = false;
const buttonclick=async()=>{
    if(started === true)return false;
    started = true;
    
    let counter = 0;
    const el = document.getElementById('p1');
    while(counter !== 50){
        counter++; 
        el.innerHTML = pone();
        await sleep(100);
        console.log('do', counter);
    }
    started = false;
};

Answer 3

При нажатии на кнопку, запускается функция buttonclick, которая запускается снова в цикле setInterval, тем самым перезаписывая counter на 0;
setInterval осуждают (это не точно).

Я бы использовал такой вариант:

function buttonclick(button) { // При нажатии на кнопку запускаем функцию
  let counter = 0, // счётчик
    time = setTimeout(function tick() { // Запускаем цикл
      let p1 = Math.ceil(Math.random() * 100); // создаём рандомное число
      document.getElementById("p1").innerHTML = p1; // записываем в элемент
      //
      if(counter >= 50) clearTimeout(time); // Если цикл выполнился > 50 раз, то чистим его
      else { // если нет, то:
        time = setTimeout(tick, 10); // запускаем цикл интервал заного
        counter++; // +1 к счётчику.
      }
    }, 10);
}

<input type="button" name="b" value="click me" onclick="buttonclick(this)" />
<div id="p1"></div>

Answer 4

const button = document.querySelector('#a');
const output = document.querySelector('#output');

button.addEventListener('click', function() {
  let counter = 0;

  const interval = setInterval(function() {
    const a = Math.ceil(Math.random() * 100);

    output.innerText = a;

    counter++;

    if (counter >= 50) clearInterval(interval);
  }, 10);
});

body {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
}

#a {
  display: inline-block;
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.2s linear;
  will-change: transform;
}

#a:active {
  transform: translateY(2px);
}

<div id="a">Click on me</div>
<div id="output"></div>

Answer 5

function buttonclick(counter = 50) {
  const time = setInterval(() => {
    document.querySelector('#p1').innerHTML = Math.ceil(Math.random() * 100);
    if (--counter == 0) clearInterval(time);
  }, 10);  
}

<input type="button" name="b" value="click me" onclick="buttonclick()" />
<div id="p1"></div>

БЛОГ НА HUSL

Не срабатывает clearInterval в JS

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