Can't iterate whole alphabet using setInterval

Question

I want code to iterate each letter every second, but it iterates the whole alphabet in one second.

let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

setInterval(function() {
  for (let i = 0; i < alphabet.length; i++) {
    console.log(alphabet[i]);
  }
}, 1000);

You are iterating over your array inside setInterval(). I think you want to be doing this outside of setTimeout — pr.lwd, Jun 15 '21 at 10:28
yeah for sure, look what you are doing... "after a second, run this function (that iterates over the whole array)" — Alberto Sinigaglia, Jun 15 '21 at 10:29
To be clear: the issue here is that you're starting these intervals all at the same time. If you wrap the interval command in a `setTimeout` using `i * 1000` as delay, you should get the expected result. — , Jun 15 '21 at 10:41

prasanth · Answer 1 · 2021-06-15T10:46:23.500

2

No need ah loop simple interval is enough. If iteration reached end of the array use clearInterval for stop the itreation

const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']


function run() {
  let i = 0;
  let interval = setInterval(() => {
    if (i === alphabet.length) {
      clearInterval(interval);
      return
    }
    console.log(alphabet[i])
    i++
  }, 1000)
}

run()

edited Jun 15 '21 at 10:46

answered Jun 15 '21 at 10:32

prasanth

22,145
4
29
53

After a minute it is still logs `undefined`)) – Leonid Jun 15 '21 at 10:36
It needs to be `i = (i + 1) % alphabet.length` – Jun 15 '21 at 10:37
@Leonid now its ready please check updated answer – prasanth Jun 15 '21 at 10:47
@ChrisG Thanks . But i have fixed with `clearInterval` – prasanth Jun 15 '21 at 10:49
thank you, but why did you add `return` after clearInterval? – Aethereal Jun 15 '21 at 12:18
Because `index` start from `0`. while end reach on `i=25` it will display last index value of array . so `i == arr.length` is match `26` index value is not there on array. so we used `return` to break the execution – prasanth Jun 15 '21 at 12:24
but doesn't `clearInterval` break execution by itself after `if` statement matches? – Aethereal Jun 15 '21 at 12:46
yes `clearInterval` stop the `interval` function that mean stop the iteration – prasanth Jun 15 '21 at 15:20

score 1 · Answer 2 · answered Jun 15 '21 at 10:32

1

If you want to get element one after another after one second then you can use setTimeout instead of setInterval

setTimeout vs setInterval

let alphabet = [
  "a",
  "b",
  "c",
  "d",
  "e",
  "f",
  "g",
  "h",
  "i",
  "j",
  "k",
  "l",
  "m",
  "n",
  "o",
  "p",
  "q",
  "r",
  "s",
  "t",
  "u",
  "v",
  "w",
  "x",
  "y",
  "z",
];

for (let i = 0; i < alphabet.length; i++) {
  setTimeout(function () {
    console.log(alphabet[i]);
  }, i * 1000);
}

answered Jun 15 '21 at 10:32

DecPK

24,537
6
26
42

This doesn't loop; I'm pretty sure OP needs it to loop. – Jun 15 '21 at 10:42
You actually create 27 timeOut function at once in the background. I don't think this is a good solution. They all are running at the same time. – ikhvjs Jun 15 '21 at 10:43
@ikhvjs First of all there will be `26` timeout and secondly setTimeout just make `26` function in the background ready to call as soon as the main thread is `free`. AFter the functions are called, There job is done. What is it that you think it is not a good solution. – DecPK Jun 15 '21 at 10:52
setTimeout is running in the background and once it is finished, it will be set to the event loop queue. The problem is if there 1000 items in the array, you actually create 1000 setTimeout running in the background at the same time. – ikhvjs Jun 15 '21 at 11:14
Since there are only `26` values in the array, that's why I came up with this solution. If there were more values then I would've come up with another solution...' – DecPK Jun 15 '21 at 11:16
I can understand. I just think it is unnecessary to use setTimeout for a setInterval job. – ikhvjs Jun 15 '21 at 11:25

score 1 · Answer 3 · answered Jun 15 '21 at 10:34

1

You don't need to include the for loop in your setInterval. Instead, you just need to declare an index and update it in the setInterval and once the index is out of range of the array, you need to clear the timer.

let alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] 
let index= 0;
const timer = setInterval(function () {
  index< alphabet.length
    ? console.log(alphabet[index++])
    : clearInterval(timer);
}, 1000);

answered Jun 15 '21 at 10:34

ikhvjs

5,316
2
13
36

1

This doesn't loop. OP needs it to loop. – Jun 15 '21 at 10:43
@ChrisG, ```I want code to iterate each letter every second```, is that what OP wants? What do you mean OP need it to loop? – ikhvjs Jun 15 '21 at 10:47
OP is using setInterval, so I'm pretty sure they want to get `a` again after the first `z`. – Jun 15 '21 at 11:24
@ChrisG, I see. But somehow he use for loop instead of a indefinite while loop. That’s why I guess they want loop only one time. – ikhvjs Jun 15 '21 at 11:39
They are starting 26 intervals. So without any further information, they want an interval for each letter. – Jun 15 '21 at 11:50
@ChrisG, It is fine. The accepted answer is the same as my solution. – ikhvjs Jun 15 '21 at 12:04
1

Yeah, but the answerer changed it so it no longer loops... :P Jesus, this page is a trainwreck. – Jun 15 '21 at 12:05
@ChrisG, And somehow it is what OP wants.....interesting – ikhvjs Jun 15 '21 at 12:07

Alumno Cabreado · Accepted Answer · 2021-06-15T11:00:39.677

1

That happens because you iterate throught entire array, for avoid that, you need add to the index +1 for iterate.

let alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

let i = 0;
let intervalID = setInterval(function (){
    
    console.log(alphabet[i]);
    
    i++;
    
    i < alphabet.length ? null : clearInterval(intervalID);
}, 1000);

edited Jun 15 '21 at 11:00

answered Jun 15 '21 at 10:37

Alumno Cabreado

191
8

Increase `i` using `i = (i + 1) % alphabet.length` and this is the best solution. – Jun 15 '21 at 10:44
You need to clear the setInterval once i is smaller than the array.length, otherwise, it is still running under the background. – ikhvjs Jun 15 '21 at 10:50
That was the intention, but i change it, thanks for advice! – Alumno Cabreado Jun 15 '21 at 11:01
Thank you, but how can it run under the background? – Aethereal Jun 15 '21 at 12:10

score 0 · Answer 5 · answered Jun 15 '21 at 10:45

Only setInterval will be enough here. No need to add a loop.

let alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
let counter = 0;
let interval = setInterval( () => {
    console.log( alphabet[ counter++ ] );
    if( counter === alphabet.length ){
        clearInterval( interval );
    }
}, 1000 );

score 0 · Answer 6 · answered Jun 15 '21 at 11:02

How about this ? clear interval from closure.

const alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] 

let i = 0

const timerId = setInterval(function (){
    if(i === alphabet.length){
        clearInterval(timerId);
        console.log('Clear interval')
    }else{
        console.log(alphabet[i++]);
    }
}, 1000);

Can't iterate whole alphabet using setInterval

6 Answers6