逐個顯示數組的元素 - 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(); 
    }); 
});