Question

<button type="button" onclick="loadDoc()">Scimba text</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    for (var i = 1; i<5; i++){
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        document.getElementById(i).innerHTML = xhttp.responseText;
      }
    }
  };
  xhttp.open("GET", "info1.txt", true);
  xhttp.send();
}
</script>

各位大家好！需要一些帮助...当我单击按钮时，如何使for循环迭代一次，当第二次单击按钮时，循环也将第二次迭代，依此类推......？

Answer 1

忘记使用循环。当您想要立即执行某些操作时，循环就是为了。

从本质上讲，这归结为每次点击事件发生时递增一个值，然后根据新值的内容做一些事情。

首先将i变量置于之外事件处理函数的范围。对此的简单方法是使i成为全局的。

（更好的方法是使用IIFE范围i并分配事件处理函数with JavaScript而不是HTML。）。

然后，在事件处理函数内部：

增量i

获取您想要的数据

根据i
的值将数据放在适当的位置

Answer 2

你应该使用一个计数器。

声明一个全局变量（带var），并在每次循环时增加它。

Answer 3

正如Quentin所说，既然你想手动增加你的循环，你就不能再使用for循环了。你应该做这样的事情http://jsfiddle.net/t97ou0ny/。这将增加每次点击的计数，如果大于限制，则将计数重置为0.

HTML

<body>
  <div id="count">0</div>
  <button id="inc-btn">
    Increment
  </button>
</body>

JS

$(document).ready(function() {
  var count = 0;
  var limit = 5;
  var count_div = $('#count');
  var increment_btn = $('#inc-btn');

  increment_btn.click(function() {
    if (++count > limit) {
      count = 0;
    }

    count_div.text(count);
  });
});

Answer 4

正如其他人所说，你不需要循环。您需要一些东西来跟踪按钮被点击的次数。

然而，这很棘手，因为您不知道用户是否会在响应返回之前或之后单击按钮。如果他们在响应返回之前单击按钮，则需要在响应返回时循环以赶上已经发生的按钮单击次数。如果他们在响应返回后单击按钮，您必须保持响应并在用户单击时使用它。

解决这种不确定性的一种简洁方法是使用Promise s。它们将允许您只编写一次逻辑，而不关心响应是否已到达。

plnkr example

<button type="button" onclick="loadDoc()">Scimba text</button>

<script>
window.loadDoc = (function () {
    var i = 1;
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "info1.txt", true);
    xhttp.send();

    // create a promise for the result
    var pResponse = new Promise(function (resolve) {
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                resolve(xhttp.responseText);
            }
        };
    });

    return function () {
        if (i < 5) {
            var c = i;
            // chain off the promise once for each click
            pResponse.then(function (response) {
                document.getElementById(c).innerHTML = response;
            });
            i += 1;
        }
    };
})();
</script>

对于循环onclick按钮

4 个答案:

HTML

JS