<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 для повторения один раз, когда я нажимаю кнопку и когда кнопка нажимается во второй раз, цикл будет повторяться также во второй раз и так далее ...?

2
JONNI CAREYN 14 Дек 2015 в 21:22

4 ответа

Лучший ответ

Как уже говорили другие, вам не нужна петля. Вам нужно что-то отслеживать, сколько раз была нажата кнопка.

Однако это сложно, потому что вы не знаете, будет ли пользователь нажимать кнопку до или после возвращения ответа. Если они нажимают кнопку до того, как ответ возвращается, вам нужно выполнить цикл, когда ответ возвращается, чтобы отследить количество нажатий кнопки, которые уже имели место. Если они нажимают кнопку после возврата ответа, вы должны удерживать ответ и использовать его по щелчку пользователя.

Чистый способ устранить эту неопределенность - использовать Promise. Они позволят вам написать логику только один раз и не заботиться о том, получен ответ или нет.

пример plnkr

<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>
0
JLRishe 14 Дек 2015 в 19:08

Как сказал Квентин, поскольку вы хотите вручную увеличивать цикл, вы больше не можете использовать цикл 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);
  });
});
1
Daniel Kobe 14 Дек 2015 в 18:35

Забудьте об использовании цикла. Циклы предназначены для того, когда вы хотите сделать что-то несколько раз.

По своей сути это сводится к увеличению значения каждый раз, когда происходит событие щелчка, а затем что-то делается в зависимости от того, что это новое значение.

Начните с создания i переменной вне области действия функции-обработчика событий. Простой подход для этого - сделать i глобальным.

(Более хороший подход заключается в использовании IIFE для определения области i и назначения функция обработчика событий с JavaScript вместо HTML.) ,

Затем внутри функции обработчика событий:

  1. приращение i
  2. получить данные, которые вы хотите
  3. поместите данные в соответствующее место на основе значения i
2
Quentin 14 Дек 2015 в 18:27

Вы должны использовать счетчик.

Объявите глобальную переменную (с помощью var) и увеличивайте ее при каждом цикле.

1
Rafa Jaques 14 Дек 2015 в 18:27