setInterval и clearInterval не работают

Question

setInterval и clearInterval не работают

1

Я пытаюсь сделать динамический индикатор выполнения, который начинается с ширины 1% и достигает ширины 100%; Вот функция

const dynamicBar = (id)=>{
            let bar = document.getElementById(id);
            let width = 1;

            let id= setInterval(frame,10);
            function frame(){
                if(width>=100){
                    clearInterval(id);
                }
                else{
                    bar.style.width = width + "%";
                    width++;
                }
            }

        };

И HTML часть:

<div class="w3-light-grey">
    <div class="w3-red" style="width:20%;height:20px;" id="bar1">       
    </div>  
</div>

<button onClick="dynamicBar('bar1')" class="w3-button">Click Me</button>

но функция не работает. Это работает, если я использую var вместо let, но я хочу знать, как это сделать, используя ключевое слово let.

dead pool 01 апр. 2019, в 17:27

Источник

11

многократное использование id в качестве имени переменной - вы передаете его в функцию, но объявляете локальную переменную - возможно, из-за этого она не работает, вызываете второй параметр intervalId или что-то другое
Pete 01 апр. 2019, в 14:30
0

это была проблема. Спасибо
dead pool 01 апр. 2019, в 14:32

Теги:

javascript

2 ответа

Ещё вопросы

многократное использование id в качестве имени переменной - вы передаете его в функцию, но объявляете локальную переменную - возможно, из-за этого она не работает, вызываете второй параметр intervalId или что-то другое

Aniket G · Answer 1 · 2019-04-01T11-44-00.000Z

let не позволяет вам определять что-то дважды, поэтому вам нужно использовать другое имя. У вас был id как для вашего параметра, так и в строке 5, что запрещено с помощью let.

Например,

let var1 = true;
let var1 = false;

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

let var1 = true;
var1 = false;

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

const dynamicBar = (idName) => {
  let bar = document.getElementById(idName);
  let width = 1;

  let id = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      bar.style.width = width + "%";
      width++;
    }
  }

};

<div class="w3-light-grey">
  <div class="w3-red" style="width:20%;height:20px;background-color:red;" id="bar1">
  </div>
</div>

<button onClick="dynamicBar('bar1')" class="w3-button">Click Me</button>

Deegha galkissa · Answer 2 · 2019-04-01T12-38-00.000Z

когда вы используете var, ваш первый идентификатор был переопределен вашим вторым назначением идентификатора, поэтому он не выдаст ошибку. но когда вы используете let, он сохраняет целостность кода и говорит нет.

В качестве примера

var foo = "something" 
var foo = "another thing"

console.log(foo) //another thing

но

let foo = "something" 
let foo = "another thing"

give you this, "Identifier 'foo' has already been declared"

еще одна вещь, это использовать const для постоянных значений.

вместо этого

let id = setInterval (frame, 10);

использование

const interval = = setInterval(frame, 10);

убедитесь, что вы очищаете интервал внутри славы

clearInterval(interval)

и ваш код начнет работать