setTimeout()
The setTimeout()
method is used to schedule the execution of a function after a specified delay in milliseconds. It’s a key feature of both browser environments and Node.js, enabling asynchronous behavior in code execution. This method allows developers to delay operations, create animations, implement polling, and handle various timing-related tasks without blocking the main thread.
setTimeout()
is commonly used in web development for creating delays between actions, implementing timeouts for operations that might not complete, animating elements, scheduling updates, and managing other time-dependent behaviors in applications.
Syntax
setTimeout(function, delay, param1, param2, ...);
Parameters:
function
: A function to be executed after the timer expires.delay
: Optional. The time in milliseconds to wait before executing the function. The default is 0.param1, param2, ...
: Optional. Parameters to pass to the function when it is executed.
Return value:
- The
setTimeout()
method returns a numeric ID that can be used withclearTimeout()
to cancel the timer.
Example 1: Basic Timeout
This example demonstrates the basic usage of setTimeout()
to display a message after a delay:
// Display a greeting after 2 secondsfunction greetUser() {console.log('Hello, welcome to our website!');}// Set up the timeoutconst timeoutId = setTimeout(greetUser, 2000);
The output produced by this after two seconds will be:
Hello, welcome to our website!
In this example, we define a function greetUser()
that logs a welcome message. We then use setTimeout()
to schedule this function to run after 2000 milliseconds (2 seconds). The function is stored in a variable timeoutId
, which could be used to cancel the timeout if needed.
Example 2: Cancelable Countdown Timer
This example creates a cancelable countdown timer using setTimeout()
:
let timerId;function startCountdown() {let count = 5;function countdown() {count--;if (count > 0) {console.log(`Countdown: ${count}`);timerId = setTimeout(countdown, 1000);} else {console.log('Countdown complete!');}}console.log(`Countdown: ${count}`);timerId = setTimeout(countdown, 1000);function cancelCountdown() {clearTimeout(timerId);console.log('Countdown cancelled!');}return cancelCountdown;}startCountdown();
The output produced by this code is:
Countdown: 5Countdown: 4Countdown: 3Countdown: 2Countdown: 1Countdown complete!
If cancelled after 2.5 seconds, the output of this code will be:
Countdown: 5Countdown: 4Countdown: 3Countdown cancelled!
In this example, the countdown begins at five and logs each step every second until completion. The returned cancelCountdown
function allows the timer to be stopped before it finishes.
Example 3: Debouncing User Input
This example demonstrates a practical use case of setTimeout()
for debouncing, which is commonly used to limit the rate at which a function is executed:
// Debounce function to prevent excessive processing during rapid eventsfunction debounce(func, delay) {let timeoutId;return function (...args) {// Clear the previous timeoutclearTimeout(timeoutId);// Create a new timeouttimeoutId = setTimeout(() => {func.apply(this, args);}, delay);};}// Function to handle user search inputfunction handleSearch(searchTerm) {console.log(`Searching for: ${searchTerm}`);// In a real app, this would make an API call or filter results}// Create a debounced version of the search handlerconst debouncedSearch = debounce(handleSearch, 500);// Simulate user typing in a search box with rapid changesconsole.log('User starts typing...');debouncedSearch('a');debouncedSearch('ap');debouncedSearch('app');debouncedSearch('appl');debouncedSearch('apple');// Output:// User starts typing...// (After 500ms) Searching for: apple
This example shows how setTimeout()
can be used to create a debounce function, which is a common technique for improving performance in web applications. The debounce function ensures that the search handler is only called once after the user has stopped typing for 500 milliseconds, rather than firing an event for every keystroke. This is especially useful for expensive operations like API calls or complex calculations.
Frequently Asked Questions
1. What happens if I set the delay to 0?
Setting a delay of 0 doesn’t execute the function immediately, but rather schedules it to run as soon as possible after the current script finishes executing. This is useful for moving a task to the end of the event queue, allowing the browser to finish rendering or other tasks first.
2. Can setTimeout()
guarantee exact timing?
No, setTimeout()
does not guarantee exact timing. The actual delay may be longer than specified due to several factors:
- The JavaScript event loop might be busy processing other tasks
- Browser throttling for inactive tabs or background processes
- System-level constraints like CPU load
- Minimum delay thresholds enforced by browsers (typically 4ms for nested timeouts)
3. How do I pass parameters to the timeout function?
There are two ways to pass parameters:
- Add parameters after the delay argument:
setTimeout(myFunction, 1000, param1, param2)
- Use an arrow function or closure:
setTimeout(() => myFunction(param1, param2), 1000)
4. Is setTimeout()
asynchronous?
Yes, setTimeout()
is asynchronous. It schedules the function to run in the future but doesn’t pause the execution of the current code. This means code after the setTimeout call will continue to execute immediately.
5. What’s the difference between setTimeout()
and setInterval()
?
setTimeout()
executes a function once after a specified delay, while setInterval executes a function repeatedly with a fixed time delay between each call. If you need repeated execution, setInterval is more appropriate, but for a one-time delayed execution, setTimeout is the correct choice.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn JavaScript on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner Friendly15 hours