CodeXpress

Welcome, Guest: Join CodeXpress Log In!

Stats: 11 Members, 99 topics and 9 posts Date:  Saturday 31 October 2020 at 10:28 PM

This is a product of CodeXpress Buy License for your website

[Go Make Things] Run a function after a specified amount of time using vanilla JS

CodeXpress / Science/Technology / Vanilla JS / [Go Make Things] Run a function after a specified amount of time using vanilla JS

16 people viewed

[go Make Things] Finding Remote Web Dev Jobs [go Make Things] How To Clear All Of The Fields In A Form With Vanilla Js [go Make Things] Run A Function After A Specified Amount Of Time Using Vanilla Js [go Make Things] Free Icons For Use In Your Projects
(Go Down) (» Reply topic)
[Go Make Things] Run a function after a specified amount of time using vanilla JS by Marshallunduemi(): Thu 09, July, 2020
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.

Welcome to CodeXpress Forum Script - Download NL script Free
(» Go Up)

You must Sign in or Sign Up to post content

For you to post content on this website you have to log in or register, it only take few minute to create account

Go Up

Recommended for you

[go Make Things] Can Junior Developers Ask Too Many Questions? [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] Free Icons For Use In Your Projects

Currently: 1 guest(s) reading this article

Developed by Codexpress Programming Labs
Post content
Powered by Marshall