setInterval不适用于数组

Question

I'm trying to simplify my code by using an array but I don't know how to do it.

So far my code is,

var items = ['html5', 'css', 'javascript', 'jquery'];
var itemLoop = function(i) {
if (items[i]) {
    console.log(items[i]);
    setInterval(function(){itemLoop(i+1);}
    , 4000);
    }
}
itemLoop(0);

But this doesn't return the items as I want them to, basically I want the items to be returned in console.log() but on a loop. Originally my code was,

setInterval(function() {
    setTimeout(function() {
            console.log("html5");
    }, 5000);
    setTimeout(function() {
            console.log("css");
    }, 10000);
    setTimeout(function() {
            console.log("javascript");
    }, 15000);
    setTimeout(function() {
            console.log("jquery");
    }, 20000);
}, 20000);

But I'm looking to add more than just 4 items, and creating multiple setTimeout() 's doesn't seem like the right way or the most practical way so I wanted to put the "items" in an array instead but I don't think I'm doing it right.

Any help is greatly appreciated, thanks.

Answer 1

There's a few ways you can do this, but you need to be able to capture the state either by changing the array or holding onto an integer.

This solution uses a single interval along with an index to loop through the array, printing as needed and then stopping the timer when past the end of the array.

 const items = ['html5', 'css', 'javascript', 'jquery']; let i = 0; const interval = setInterval(() => { console.log(items[i]); i += 1; if (i >= items.length) { clearInterval(interval) } }, 4000); 

Answer 2

setTimeout() is a little more practical and leads to more succinct code in this situation since you're only performing one action on each item. You just need to increment time by the item index * some multiple. For example (I changed 4000 to 1000 to make it run a little faster):

 var items = ['html5', 'css', 'javascript', 'jquery']; items.forEach((c,i) => setTimeout(() => console.log(c), i*1000)) 

If you want the delay before the first item just change i*1000 to (i+1) * 1000

If you want it to run in a perpetual loop
Now setInterval() becomes more useful:

 var items = ['html5', 'css', 'javascript', 'jquery']; let i = 0; let interval = setInterval(() => console.log(items[i++ % items.length]), 1000) // some point in the future call clearInterval(interval) to stop