Execute script after specific delay using JavaScript
There is the following:
setTimeout(function, milliseconds);
function which can be passed the time after which the function will be executed.
See: Window setTimeout()
Method.
Javascript: Call a function after specific time period
You can use JavaScript Timing Events to call function after certain interval of time:
This shows the alert box every 3 seconds:
setInterval(function(){alert("Hello")},3000);
You can use two method of time event in javascript.i.e.
setInterval()
: executes a function, over and over again, at
specified time intervalssetTimeout()
: executes a function, once, after waiting a
specified number of milliseconds
Execute JS function after some time of page load
Use setTimeout
instead, as it is called only once after the pause:
setTimeout(myFunc, 3000);
How to delay execution in between the following in my javascript
You can use setTimeout
for that:
setTimeout(function() {
// Your code here
}, delayInMilliseconds);
E.g.:
$("#myName").val("Tom");
/// wait 3 seconds
setTimeout(function() {
$("#YourName").val("Jerry");
/// wait 3 seconds
setTimeout(function() {
$("#hisName").val("Kids");
}, 3000);
}, 3000);
setTimeout
schedules a function to be run (once) after an interval. The code calling it continues, and at some point in the future (after roughly the time you specify, though not precisely) the function is called by the browser.
So suppose you had a function called output
that appended text to the page. The output of this:
foo();
function foo() {
var counter = 0;
output("A: " + counter);
++counter;
setTimeout(function() {
output("B: " + counter);
++counter;
setTimeout(function() {
output("C: " + counter);
++counter;
}, 1000);
}, 1000);
output("D: " + counter);
++counter;
}
...is (after a couple of seconds):
A: 0
D: 1
B: 2
C: 3
Note the second line of that. The rest of foo
's code runs before either of the scheduled functions, and so we see the D
line before the B
line.
setTimeout
returns a handle (which is a non-zero number) you could use to cancel the callback before it happens:
var handle = setTimeout(myFunction, 5000);
// Do this before it runs, and it'll never run
clearTimeout(handle);
There's also the related setInterval
/ clearInterval
which does the same thing, but repeatedly at the interval you specify (until you stop it).
Delay function execution if it has been called recently
The question
Like a debouncer, you don't want to immediately execute on each call. But unlike a debouncer, you want to have each call queued for future execution.
Like a scheduler, you want to specify when to call the queued calls. More specifically, you want to execute calls with a fixed delay inbetween each call.
This means we can take inspiration from different ideas:
- From debouncers: How to not execute on every call.
- From queues: How to organize calls (first-in-first-out (FIFO) is what we want).
- From schedulers: How to manage calls.
With async
/await
Using async
/await
is a great idea! Note that in JS there is no way to sleep()
natively because of its original synchronous design. We could either implement sleep()
synchronously by spinning (highly discouraged because it will make your site unresponsive) or asynchronously with Promises.
Example of how a sleep()
function can be implemented asynchronously:
function sleep(milli) {
return new Promise(resolve => setTimeout(resolve, milli));
}
Now, to refactor your code to use async
/await
, we mostly only need to inline the setTimeout()
function. Simply put, until the setTimeout()
call we can do as usual, then sleep()
for the specified time (1000 milliseconds), and then inline the callback:
function sleep(milli) {
return new Promise(resolve => setTimeout(resolve, milli));
}
let available = true;
let requested = 0;
async function notTwiceASecond() {
if (available) {
available = false;
console.log("Executed");
// ...
await sleep(1000);
available = true;
if (requested) {
--requested;
notTwiceASecond();
}
} else {
++requested;
}
}
for (let i = 0; i < 3; ++i) {
console.log("called");
notTwiceASecond();
}
JavaScript - Delay execution of certain javascript
Looking at your code, I think you should just remove the line
show_next_live_notify();
at the bottom of your script. It automatically executes everything right upon start instead of letting setInterval
do its job
To delay the whole script, replace the last two lines in the jQuery call with something like this:
function startMe() {
interval = setInterval(show_next_live_notify, (showtime + <?php print $s + 100; ?>));
}
setTimeout(startMe, 10000);
Related Topics
Advantages of Createelement Over Innerhtml
Seedable JavaScript Random Number Generator
Mongoose and Multiple Database in Single Node.Js Project
How to Sort Array Inside Collection Record in Mongodb
Is the Order of Elements in a JSON List Preserved
What Do Square Brackets Around a Property Name in an Object Literal Mean
How to Access Parent Iframe from JavaScript
When to Use Vanilla JavaScript VS. Jquery
How to Render Components with Different Layouts/Elements Using React-Router-Dom V6
Most Efficient Way to Convert an HTMLcollection to an Array
How to Get File Extensions with JavaScript
When to Use Setattribute VS .Attribute= in JavaScript
Check If a JavaScript String Is a Url
How to Call a JavaScript Function on Page Load
JavaScript - Get Array of Dates Between 2 Dates
Angularjs:Why Ng-Bind Is Better Than {{}} in Angular
How to Detect Page Navigation on Youtube and Modify Its Appearance Seamlessly