For 循环 onclick 按钮答案

【问题标题】：For loop onclick buttonFor 循环 onclick 按钮
【发布时间】：2016-03-20 08:15:26
【问题描述】：

<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 循环在单击按钮时迭代一次，当第二次单击按钮时，循环也将第二次迭代，依此类推...？

【问题讨论】：

你做得很好。您唯一需要注意的是结果是异步返回的。
您看到错误了吗？只要确保你的 html 的其余部分是正确的。我看到您正在通过 ID 获取一个元素，该 ID 是一个数字。 ID 应以字母开头。见this
您想在单击按钮越来越多时增加迭代次数还是什么？你的代码看起来不错

标签： javascript html ajax

【解决方案1】：

你应该使用计数器。

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

【讨论】：

【解决方案2】：

忘记使用循环。循环适用于您想立即多次执行某事的情况。

本质上，这归结为每次点击事件发生时递增一个值，然后根据该新值执行某些操作。

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

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

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

递增i
获取你想要的数据
根据i的值把数据放到合适的地方

【讨论】：

【解决方案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);
  });
});

【讨论】：

【解决方案4】：

正如其他人所说，您不需要循环。你需要一些东西来记录按钮被点击了多少次。

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

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

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>

【讨论】：