Passing parameters to the function in setTimeout

Question

I want to call a function in a cycle with setTimeout(), and also pass the counter as a parameter. Here's what I tried:

<!DOCTYPE html>
<html><body>

<button onclick="timed1()">Display alerts</button>

<script>
function timed1() {
 for (i=1; i<4; i++){
  setTimeout(
     (function(i){ alert(i) })(i), 1000*i
   );
 }
}
</script>

</body></html>

Function calls are done with correct values, but immediately instead of the intervals I wanted. I have read this and this SO questions but unfortunately don't see yet what should I change in my case.

So you are executing the function and assigning what it returns to the timeout. — epascarello, Feb 07 '18 at 21:09

score 1 · Accepted Answer · answered Feb 07 '18 at 21:11

1

You can use let here if you want to bind different values of i to the setTimeout function

function timed1() {
    for (let i=1; i<4; i++){
      setTimeout(function() { 
          alert(i) 
      }, 1000*i)
    }
}
timed1()

answered Feb 07 '18 at 21:11

mehulmpt

15,861
12
48
88

score 1 · Answer 2 · edited Feb 08 '18 at 09:39

1

The expression (function(i){ alert(i) })(i) does not return a function for setTimeout to call. If you're going the IIFE way, make sure to return a new function from it:

setTimeout((function(i) {
    return function() {
        alert(i);
    };
})(i), 1000 * i);

With ES2015+ a far better readable equivalent can be realized:

for (let i = 1; i < 4; i++) {
    setTimeout(() => alert(i), 1000 * i);
}

edited Feb 08 '18 at 09:39

mehulmpt

15,861
12
48
88

answered Feb 07 '18 at 21:13

JJWesterkamp

7,559
1
22
28

thank you @Jeffrey! (in my case, I'll take mehulmpt's solution for its easier readability, but I learned important piece from yours) – Vasily A Feb 07 '18 at 21:20
1

That's fine :) I have added a more readable equivalent, just for fun. – JJWesterkamp Feb 07 '18 at 21:23
awesome, thanks! I'm only starting to learn arrow functions :) – Vasily A Feb 07 '18 at 21:25

score 1 · Answer 3 · answered Feb 07 '18 at 21:16

You're swimming on IIFE (Immediately Invoked Function Expression).

You're calling your function immediately.

setTimeout(
   (function(i){ alert(i) })(i), 1000*i
);                           ^

The scope of your variable i is open, you need to use let keyword.

for (i = 1; i < 4; i++) {
     ^

Look at this code snippet

function timed1() {
  for (let i = 1; i < 4; i++) {
    setTimeout(
      function() {
        alert(i)
      }, 1000 * i);
  }
}

<button onclick="timed1()">Display alerts</button>

thank you for the detailed explanation, I appreciate it! – Vasily A Feb 07 '18 at 21:28 — Vasily A, Feb 07 '18 at 21:28

score 1 · Answer 4 · answered Feb 07 '18 at 21:16

1

The setTimeout function allows you to pass arguments to the callback function, like so:

function timed1() {
  for (i=1; i<4; i++){
    setTimeout(alert, 1000 * i, i);
  }
}

timed1()

Any arguments after the time are passed along to the callback.

answered Feb 07 '18 at 21:16

Sidney

4,495
2
18
30

ah, that's very neat! didn't think about passing the arguments that way, thank you! – Vasily A Feb 07 '18 at 21:27

Passing parameters to the function in setTimeout

4 Answers4

Look at this code snippet