逐个显示数组的元素 - jquery

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

我的建议是使用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 2

使用setInterval()和clearInterval()

$(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); 
 
}

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

---

UPDATE：如果您需要实现它使用for环和setTimeout()然后做这样的事情

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); 
 
});

<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(); 
    }); 
});