Question

所以我有一个按钮，我想在几秒钟内显示我的数组的每个元素。这是我的HTML代码：

<button class="btn" id="random">Start</button>

我使用jQuery创建了一个数组，我想用它来更改按钮文本：

$(document).ready(function() {
    $("#random").on("click", loop);
});

var array = ["el1","el2","el3"];

function loop() {
    for (i = 0; i < array.length; i++) {
        $("#random").html(array[i]);
    }
    var random = Math.floor(Math.random() * array.length) + 1;
    $("#random").html(array[random]);
}

for循环应该做我想要的但是我找不到延迟速度的方法，它总是只显示最后一行代码。当我尝试使用setTimeout或类似内容时，它会跳过for循环。

Answer 1

使用 setInterval() 和 clearInterval()

＆＃13;

$(document).ready(
  function() {
    $("#random").on("click", loop);
  }
);

var array = ["el1", "el2", "el3"];
var int;

function loop() {
  var i = 0; // variable for array index
  int && clearInterval(int); // clear any previous interval
  int = setInterval(function() { //store interval reference for clearing
    if (i == array.length) clearInterval(int); // clear interval if reached the last index
    $("#random").text(i == array.length ? 'Start' : array[i++]); // update text with array element atlast set back to button text
  }, 1000);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn" id="random">Start</button>

＆＃13;

更新：如果您需要使用 for 循环和 setTimeout() 来实施，请执行以下操作

＆＃13;

var array = ["el1", "el2", "el3", "Start"];

function loop() {
  for (i = 0; i < array.length; i++) {
    (function(i) {
      setTimeout(function() {
        $("#random").html(array[i]);
      }, i * 1000);
    })(i);
  }
}


$(function() {
  $("#random").on("click", loop);
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<button class="btn" id="random">Start</button>

＆＃13;

Answer 2

我的建议是使用IIFE和delay：

var array = ["el1","el2","el3", "Start"];

function loop(){
  for (i = 0; i < array.length; i++){
    (function(i) {
      $("#random").delay(1000).queue(function () {
        $(this).html(array[i]);
        $(this).dequeue();
      });
    })(i);
  }
}


$(function () {
  $("#random").on("click", loop);
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<button class="btn" id="random">Start</button>

Answer 3

基本上，for循环对你没用。它以最大速度运行。延迟它在js中没有用（你只需要冻结浏览器）。相反，你可以创建一个会延迟执行的函数。有点递归，但不完全。下面就可以了。

https://jsfiddle.net/7dryshay/

$(document).ready(function() {
    $("#random").on("click", function (event) {
    // texts to cycle
    var arr = ["el1","el2","el3"];

    // get the button elem (we need it in this scope)
    var $el = $(event.target);

    // iteation function (kinda recursive)
    var iter = function () {

      // no more stuff to display
      if (arr.length === 0) return;

      // get top of the array and set it on button
      $el.text(arr.shift());

      // proceed to next iteration
      setTimeout(iter, 500);
    }

    // start first iteration
    iter();
  });
});

逐个显示数组元素 - Jquery

3 个答案: