How can I pass a parameter to a setTimeout() callback?

Deep dive into setTimeout parameters

Argument anchoring with Function.prototype.bind

When using setTimeout, Function.prototype.bind can pin parameters to your callback:

setTimeout(myFunction.bind(null, param1, param2), 1000);


Here, a fresh function is crafted with param1 and param2 fastened to it, and off it goes after the specified delay.

Direct forwarding of parameters

As of shields-up ES2015 (ES6), setTimeout kindly allows extra parameters to ride shotgun directly to the callback:

setTimeout(myFunction, 1000, param1, param2);


Post 1-second delay, param1 and param2 are popped right into myFunction.

Scope wrangling with let

When dealing with variable scope, especially within loops, ES6's let is a trusty lasso to ensure proper binding:

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(`Iteration: ${i}`); // "I got my i on you"
  }, i * 1000);
}


Each timeout gets its own playpen of scope, so that no other kid (read: index i) can mess around with it.

Roping in libraries — Underscore.js

With good ol' Underscore.js, functions like _.delay help handle parameter passing, working as an efficient wrapper around setTimeout:

_.delay(myFunction, 1000, param1, param2);


This approach gleans simplicity by using an abstraction for your timeouts.

Potentials and pitfalls

Don't forget to test different strategies to understand their nuances. For instance, arrow functions retain the this value from the outer context, while with Function.prototype.bind, you can set this if it had weekend plans already.

Steer clear of string commands with setTimeout as these can hit a performance wall and risk security breaches due to implied eval().

Comprehending the context in which timeouts run can empower your coding. Be it setting up slick animations or handling API calls, choosing the right approach can amp up the responsiveness and user delight of your application.