javascript - JS在循环中动态改变div宽度

Question

我想创建带有动画条形图的简单条形图(宽度从 0 到最终大小)。

我从 css transitions 开始，但 opera 和 chrome 有时会出现问题。

现在我尝试使用我在这里看到的机制:

https://www.w3schools.com/w3css/w3css_progressbar.asp

使用 JS。

我有几个“条形区域”:

  <div id="chart-bars">
    <div class="chart-bar-area">
        <div class="chart-bar" data-percent="80"  ></div>

    </div>

        <div class="chart-bar-area">
        <div class="chart-bar" data-percent="60"   ></div>
    </div>
  </div>

和 JS 代码可以很好地处理一个小节，但是如果我尝试为所有循环实现该机制，则此脚本仅适用于最后一个小节。其他钢筋不开槽。

我的 JS 代码如下:

  var foo = document.getElementById('chart-bars');
  var width;
  var elem;
  var id;
  for (var i = 0; i < foo.children.length; i++) {

   elem = foo.children[i].children[0];

     width = 1;
     id = setInterval(frame, 10);
    function frame() {
      if (width >= elem.dataset.percent) {
        clearInterval(id);
      } else {
        width++; 
        elem.style.width = width + '%'; 
      }
    }

  }

有人可以帮帮我吗？

谢谢

Answer 1

这是因为 i 的值超出了 setInterval 回调的范围，setInterval 只接受迭代的最后一个值，因为它是一个 window 方法。因此，您必须采用这样的闭包或解决方案。

    var foo = document.querySelectorAll(".chart-bar");
    var width;
    var elem;
    var id;
    for (var i = 0; i < foo.length; i++) {

        var myElem = {
            x: i
        }

        width = 1;
        id = setInterval(function() {
            if (width >= foo[this.x].dataset.percent) {
                clearInterval(id);
            } else {
                width++;
                foo[this.x].style.width = width + '%';
            }
        }.bind(myElem), 10);//Here you are binding that setInterval should run on the myElem object context not window context

   }