在 for() 循环中编辑变量的值

Question

我正在制作一个网站，其中有你的步骤计数器。 这是我在开始和学习时为自己做的练习。 脚本每秒都会添加一个步骤，直到达到“steps”（此示例为 5） 我希望用户能够单击添加 100 步，这样它就不会在 5 处结束。 我正在使用for() 完成所有这些操作，因为这是我发现以后在每个步骤中更新页面上的内容的最简单方法。

故事讲述的是：

1. 用户看到步数上升，1、2、3、4、5
2. 他们可以点击“加 100”来再增加 100 步（这样计数器就会继续运行）
3. 计数器已更新并一直持续到 105（意味着他们刚刚添加的前 5 + 100 个）
4. 如果他们愿意，他们可以再次增加 100 步（他们不必等到计数器达到 105）
5. 然后转到 205

它实际上不起作用，我看不出有什么问题。 我用 100 和console.log() 替换步骤来调试一下。但它不会将 100 添加到上一步值，也不会更新 for() 以继续到 105。

感谢您的帮助

let steps = 5;
$( document ).ready(function() {
  
  $(document).on("click", ".add", function() { 
  let steps =  100; // should be actual steps value + 100
  console.log(steps);
      });     
    for (var i = 0; i < steps; i++) { 
        var nbOfSteps = 0 // the numer of steps actually displayed to the user
        setTimeout(function () {
            nbOfSteps++;
            var addSteps = $("<div />", {"class": "steps"})
            .css({})
            .append($("<p>" + nbOfSteps + " steps </p>"))
            .appendTo(".one")
            $(".steps").prev().remove();
 // do some other things here
        }, 1000 * i) //update i every 1000 milliseconds
    }                 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one" id="gauche"></div>
<div class="add"> add 100 steps</div>

编辑

所以我一直在尝试

$( document ).ready(function() {
  let foots = 3;
  let i = 0;
while (i < foots) {
  setInterval(function () {
  console.log(i);
  }, 1000)
  i++;
  if (i > foots) {
    console.log("ping")
  }
}
});

正如@sirEgghead 建议的那样。但我似乎无能为力。

Answer 1

一旦到达循环指令，就会解释for 循环的条件变量。在循环内更改变量的值一次不会调整存储在内存中的条件。在这种情况下，您最好使用while 循环，并在满足您的条件后中断。

遵循这种逻辑意味着您可以随意编辑i 和steps，并且每次迭代都会使用新值对它们进行一次测试。

var maxSteps = 5
var i = 0;
var nbOfSteps = 0;
var timer;

function incrementDoc() {
  nbOfSteps++;
  $("<div />", {
      "class": "maxSteps"
    })
    .css({})
    .append($("<p>" + nbOfSteps + " steps </p>"))
    .appendTo(".one")
  $(".maxSteps").prev().remove();

  if (++i >= maxSteps) {
    clearInterval(timer);
  }
}

$(document).ready(function() {

  $(document).on("click", ".add", function() {
    maxSteps += 100;
    console.log(maxSteps);
  })

  timer = setInterval(incrementDoc, 2000);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one" id="gauche"></div>
<div class="add"> add 100 steps</div>

编辑：使用正常工作和测试的示例更新示例。

我完全取消了手动循环，让setInterval 处理循环。为了清楚起见，我还将您的内联函数分解为命名函数。一路上，我在编辑时将steps 重命名为maxSteps，只是为了我自己的理智。

setInterval 基本上是您尝试对setTimeout 执行的操作，但它内置了一个循环。我利用了它，并使用if 打破了clearInterval() 的循环。 clearInterval() 的参数是您调用 setInterval() 时的变量名称 - 在本例中为 timer。

它仍然有点草率，但它正在工作。

setInterval() reference.