[Go Make Things] Run A Function After A Specified Amount Of Time Using Vanilla JS

Today, I want to show you how to run code after a specified amount of time using the native setTimeout() function.

Let’s dig in.

Setting up code to run later #

The setTimeout() method accepts two arguments: the function to run, and how long to wait (in milliseconds) before running it.


setTimeout(function () {
console.log('I will run after 2 seconds');
}, 2000);

It’s worth noting that the timeout time is a minimum amount of time the browser should wait, and not a specific time.

If another function is actively running, the user’s tab has gone idle, or a handful of other things are going on, the function may take longer than the time you provided to run.

The callback function can be anonymous or named #

If you want, you can use a named function instead of an anonymous one to keep your code a bit more organized.

If you do, omit the parentheses (()) and just include the function name.

var logMe = function () {
console.log('I will run after 2 seconds');
};

setTimeout(logMe, 2000);


]Here’s a demo.

Canceling the function #

You can also cancel a function you’ve scheduled with setTimeout() before it runs.

Let’s say you wanted to check if a user was still actively using your app, and log them out if they’ve gone idle for security reasons.

setTimeout(function () {
var active = window.confirm('Are you still here?');
if (!active) {
// log the user out
window.alert('Logged out');
}
}, 4000);


But, if they click anywhere on the page before then, you can assume they are still using the app, and don’t want to ask them.

Every setTimeout() method returns an ID. If you assign your setTimeout() method to a variable, you can use it with the clearTimeout() method to prevent it from running.


var isActive = setTimeout(function () {
var active = window.confirm('Are you still here?');
if (!active) {
// log the user out
window.alert('Logged out');
}
}, 4000);

document.addEventListener('click', function () {
clearTimeout(isActive);
});


Here’s another demo.

Run it twice. The first time, let it run as normal. The second time, click somewhere on the page within the first 4 seconds.
Browser compatibility #

The setTimeout() method works in all modern browsers, and back to at least IE6.

0
0
205
Welcome to CodeXpress Forum Script - Download NL script Free


No comments. Be first to post a comment.

Reply to this article


Welcome, Guest: Join to reply login to reply!

♣ Post Statistic

1 guest(s) viewing this topic

Related Post

[go Make Things] Finding Remote Web Dev Jobs [go Make Things] Run A Function After A Specified Amount Of Time Using Vanilla Js [go Make Things] How To Clear All Of The Fields In A Form With Vanilla Js [go Make Things] Can Junior Developers Ask Too Many Questions? [go Make Things] Free Icons For Use In Your Projects

♣ CodeXpress Statistic

Welcome, Guest: Join CodeXpress Login

17 Members, 135 topics and 9 posts
Date: Friday 01 July 2022 at 03:06 AM

Top 5 Contributors

People who started the most discussions on codexpress.

  1. 17
  2. 92
  3. 3
  4. 11
  5. 1

Sections

CodeXpress / General:
Politics, Business, Investment, Career, Autos, Counties, Properties, Agriculture, Health, Travel, Family, Culture, Religion, Food, Pets, Romance, Diaspora, Africa, International Forum, World List Directory, How To,
Science/Technology:
Programing, Webmasters, Computers, Phones, Art, Graphics & Video, Technology Market, CSS, Innovation, PHP 7x, Vanilla JS, Software Updates,

♣ Users Online: (1)

0 Members and 1 Guests online in last 5 minutes!


Sections:

Investment, Business, Pets, Autos, Religion, Innovation, Software Updates, Technology Market, PHP 7x, Computers, Forum Games, Theatre/Comedy, Poetry, Jokes Etc, Gaming,

CodeXpress - Copyright © 2019 - 2022 Marshall Unduemi. All rights reserved. See How To Advertise.
Disclaimer: Every CodeXpress member is solely responsible for anything that he/she posts or uploads on CodeXpress.