javascript - arryをループとして使用する方法

Question

まあ、私が何をする必要があるかを説明するのは少し難しいですが：

21個の文字列の配列があり、3秒ごとに機能するjavascript関数があります。これは次のようになります。

function Ready(){
    t=setTimeout("change()",3000);
}
$(document).ready(function() {
    Ready();
});

方法がわからないのは、div要素（「id1」と呼ばれる）を3秒ごとに変更し、そのテキストを配列の新しいテキストで1から21に置き換えてから、再び1に戻すにはどうすればよいでしょうか。

Answer 1

これは、質問の「change（）」の代わりに「匿名関数」と呼ばれるものを使用します。これは、setTimeoutを使用する適切な方法です。

var arrPtr = 0;  // <-- this is the array pointer varialble.
vat txtArr = "a,b,c,d".split(",") //<-- this contains your string array

function Ready() {
   t=setTimeout(function(){
       $('#id1').html(txtArr[arrPtr]); //<-- this puts the value or the arrayat position "arrPtr" into your page
       arrPtr++; // <-- this increments the position to the next element
       if(arrPtr>txtArr.length) {
          arrPtr = 0;  // <--- this resets the position to zero when it gets to the end of the array
       }  
   },3000);
}

Answer 2

var str = ["Hello", "World"];
var changeInterval = null;
var changeIteration = 0;
var change = function(){
   $('#id1').text(str[changeIteration++ % str.length]);
}

$(document).ready(function(){
    change();
    changeInterval = setInterval(change,3000);
});

JSフィドル

Answer 3

これを試して：

$(document).ready(function() {
    var myStrings = ["string 1", "string 2", "string 3"];
    var interval = setInterval(changeValue, 3000);
    var index = 0;

    function changeValue() {
        var idx = (index + myStrings.length) % myStrings.length;
        document.getElementById("id1").innerHTML = myStrings[idx];
        index++;
    }
});

フィドルの例