setInterval和clearInterval不起作用

Question

我试图制作一个动态进度条，从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关键字这样做。

Answer 1

let不允许你定义两次，所以你需要使用不同的名称。您的参数和第5行都有id，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>

Answer 2

当您使用var时，您的第一个ID被第二个id赋值覆盖，因此不会抛出错误。但是当你使用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)

并且您的代码将开始工作