Question

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

＆＃13;

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;
  }
}

＆＃13;

<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"/>

＆＃13;

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

Answer 2

使用setInterval()，您可以将参数传递给要在延迟后重复调用的函数作为参数。然后，您可以使用数组来保存每个元素的clearInterval句柄clr[i] = setInterval(increaseVal, 10, progressBars[i],i);：

示例：

window.onload = function() {
  console.log("Hello");
  var button = document.getElementById("animateButton");
  button.onclick = goProgress;
}
var clr = [];
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]);
    clr[i] = setInterval(increaseVal, 10, progressBars[i],i);
  }
};
function increaseVal(progressBar,i) {
  console.log("In increaseVal() " + i + ": " + progressBar.value);
  if (progressBar.value < 100) {
    progressBar.value = progressBar.value + 1;
  } else {
    clearInterval(clr[i])
  }
}

<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 3

您在需要将其作为function传递的位置呼叫reference。因此，通过绑定其参数来传递increaseVal函数的引用。

for (var i = 0; i < progressBars.length; i++) {
    setInterval(increaseVal.bind(null, progressBars[i]), 10);
}

DEMO

清除interval的完整代码。您可以使用进度条元素的dataset轻松完成任务。无需在代码中引入任何新变量。

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++) {
      progressBars[i].dataset.interval = setInterval(increaseVal.bind(null, progressBars[i]), 10);
    }
  };

  function increaseVal(progressBar) {
    if (progressBar.value < 100) {
      progressBar.value = progressBar.value + 1;
    } else {
      clearInterval(progressBar.dataset.interval);
      console.log(progressBar, "cleared!!");
    }
  }
}

Javascript HTML 5 Progress Bar无法使用setInterval

3 个答案:

DEMO

DEMO