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
– epascarello, Commented Feb 7, 2018 at 21:09

mehulmpt · Accepted Answer · 2018-02-07 21:11:24Z

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 7, 2018 at 21:11

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ele · Accepted Answer · 2018-02-07 21:16:49Z

1

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>

answered Feb 7, 2018 at 21:16

Ele

33.8k7 gold badges43 silver badges80 bronze badges

1 Comment

Vasily A Over a year ago

thank you for the detailed explanation, I appreciate it!

Sidney · Accepted Answer · 2018-02-07 21:16:54Z

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 7, 2018 at 21:16

Sidney

4,8152 gold badges21 silver badges32 bronze badges

1 Comment

Vasily A Over a year ago

ah, that's very neat! didn't think about passing the arguments that way, thank you!

mehulmpt · Accepted Answer · 2018-02-08 09:39:27Z

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 8, 2018 at 9:39

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

answered Feb 7, 2018 at 21:13

JJWesterkamp

7,9461 gold badge25 silver badges30 bronze badges

3 Comments

Vasily A Over a year ago

thank you @Jeffrey! (in my case, I'll take mehulmpt's solution for its easier readability, but I learned important piece from yours)

JJWesterkamp Over a year ago

That's fine :) I have added a more readable equivalent, just for fun.

Vasily A Over a year ago

awesome, thanks! I'm only starting to learn arrow functions :)

Collectives™ on Stack Overflow

Passing parameters to the function in setTimeout

4 Answers 4

Comments

Look at this code snippet

1 Comment

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Look at this code snippet

1 Comment

1 Comment

3 Comments

Linked

Related