Javascript HTML 5 进度条不适用于 setInterval

Question

1. 单击按钮时进度条增加 1。但我没有看到它增加到 100。我必须一次又一次地单击按钮来增加值。你能告诉我我可能做错了什么吗？
2. 此外，如何在不使用进度条 ID 的情况下清除每个进度条达到 100 时的间隔？

window.onload = function() {
  console.log("Hello");
  var button = document.getElementById("animateButton");
  button.onclick = goProgress;
}

function goProgress() {
	console.log("In goProgress()");
  var progressBars = document.getElementsByClassName("progress");
  for(var i=0;i<progressBars.length;i++){
    console.log("Progress Bar " + (i+1) + ": " + progressBars[i]);
    setInterval(increaseVal(progressBars[i]),10);
  }
};

function increaseVal(progressBar){
  console.log("In increaseVal(): " + progressBar.value);
	if(progressBar.value<100){
  	progressBar.value = progressBar.value + 1;
  }
}

<progress class="progress" value="20" max="100"></progress>
<br>
<progress class="progress" value="0" max="100"></progress>
<br>
<progress class="progress" value="30" max="100"></progress>
<br>
<br>
<input type="button" value="Animate" id="animateButton"/>

Answer 1

setInterval 将一个函数作为第一个参数，您实际上是在调用该函数，您只需传递引用即可。

根据 the documentation延迟后的任何参数都将传递给函数。

setInterval(increaseVal, 10, progressBars[i]);

要在达到 100 时清除间隔，您需要保存 intervalId，最简单的方法可能就是将它写入进度条。

progressBars[i].interval = setInterval(increaseVal, 10, progressBars[i]); 

// snip

function increaseVal(progressBar){
    console.log("In increaseVal(): " + progressBar.value);
    if (progressBar.value < 100) {
        progressBar.value = progressBar.value + 1;
    } else {
        clearInterval(progressBar.interval);
    }
}

您显然也可以将它们保存在自定义数组中，但您必须将数组索引传递给函数。

检查 jsfiddle here