Question

我想制作一个条形图（#innerBar），每秒宽度减少1％。

循环似乎不起作用。我的酒吧在眨眼之间从100％下降到0％。

!myHashset.contains(thirdDrawn)

注意：#innerBar是一个带有css属性的DIV（高度：10px）。 ** +来自计时器（）的宽度; **

Answer 1

正如评论中已经说过的那样，你需要把它放在封闭中。这是一个例子：

function timer() {
  for (i = 100; i >= 0; i--) {
    setTimeout(function(t) {
      return function() {
        var timer = t.toString() + "%";
        $('#innerBar').css("width", timer);
      };
    }(i), ((100 - i) * 1000));
  }
}

timer();

#innerBar {height: 50px; background: green; transition: width 0.2s linear}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="innerBar"></div>

说明

所以我的问题是：什么是功能（t）？为什么以及如何（i）工作？它是福的倍增吗？

让我们将函数体传递给setTimeout：

function(t) {
  return function() {
    var timer = t.toString() + "%";
    $('#innerBar').css("width", timer);
  };
}(i)

我们省略内部部分：

function(t) {
   // do some stuff with t
}(i)

看起来很熟悉？就像函数体被立即调用一样，被称为IIFE，就像说：

(function(a, b) {
    return a + b;
})(2, 3)  // returns 5

回到原始函数，它接受一个参数t，当我们调用函数时，我们将迭代器i作为参数传递（所以{的值为{ {1}}在函数内变为i。正如我在评论中所说，为了“获取”t的当前值而不是获得后循环值，这是必要的。

Answer 2

我认为以下代码可以满足您的需求。输入时间应为1000，这将使你的宽度每秒减少1％

  var width = $('#innerBar').width();

  function timeLoop(time){
      width = width*0.99;
      $('#innerBar').css("width", width);
      if (width <= 0.01){
          return;
      }
      else {
          setTimeout(function() {
              timeLoop(time);
          }, time);
      }
  }

Answer 3

正如@Shomz已发布的那样。这是很好的解决方案。我只想添加我的解决方案，因为它不会创建100个函数。所以它的内存稍微亮一点。此外，您不必一遍又一遍地浏览#innerBar的DOM。我删除了jQuery作为依赖。

var size = 100;
var bar = document.getElementById( "innerBar" );

function setSize() {
    bar.style.width = size-- + "%";
    if ( size > 0 ) setTimeout( setSize, 1000 );
}
    
setSize();

#innerBar {
    width: 100%;
    height: 50px; 
    background: green; 
    transition: width 0.2s linear;
}

<div id="innerBar"></div>

使用setTimeout循环css样式：＆＃34;在眨眼之间＆＃34;

3 个答案: