How can I trigger a function after a 2-minute countdown in JavaScript?

Question

How can I trigger a function after a 2-minute countdown in JavaScript?

I would like to confess right away that I am not an expert in Javascript! However, I do possess the knowledge of using ajax. Despite this, I am struggling with a particular issue and require some assistance.

My challenge is to create a 5-minute countdown and execute a function once the timer reaches zero. It is crucial for me to pass a variable to this function. Although I attempted to use SetInterval, it is definitely not my area of expertise. Is there anyone who could provide some guidance or suggestions? I can share the code I have so far, but let's just say a gorilla at a typewriter in the darkness best describes it!

ajax timer javascript

Answer 1

Answer №1

You can try approaching it in this manner. Utilize the setTimeout() function to manage the timing aspect of the task, or in other words, to control the countdown displayed on the screen.

When initiating the setTimeout(), also initiate the function call using setInterval(). setInterval is helpful for triggering functions at specific time intervals, attempting to run them repeatedly. Once your function has executed, simply use clearInterval() to halt the timer.

Here is a code snippet borrowed and slightly adapted from a source, untested but should help you grasp the concept.

Countdown Timer: - Adapted from here.

<form name="counter"><input type="text" size="8"
name="d2"></form>

<script>
<!-- 
// 
 var interval="";
 var milisec=0;
 var seconds=300; 
 document.counter.d2.value='500';

function display(){ 
 if (milisec<=0){ 
    milisec=9;
    seconds-=1;
 } 
 if (seconds<=-1){ 
    milisec=0;
    seconds+=1; 
 } 
 else 
    milisec-=1;
    document.counter.d2.value=seconds+"."+milisec;
    setTimeout("display()",100);
    var interval = setInterval("goFunction(\" + seconds + \")", seconds);
} 
display();

goFunction(param)
{
   clearInterval(interval);
   // ... Perform necessary actions
}
-->
</script>

Answer 2

You can try approaching it in this manner. Utilize the setTimeout() function to manage the timing aspect of the task, or in other words, to control the countdown displayed on the screen.

When initiating the setTimeout(), also initiate the function call using setInterval(). setInterval is helpful for triggering functions at specific time intervals, attempting to run them repeatedly. Once your function has executed, simply use clearInterval() to halt the timer.

Here is a code snippet borrowed and slightly adapted from a source, untested but should help you grasp the concept.

Countdown Timer: - Adapted from here.

<form name="counter"><input type="text" size="8"
name="d2"></form>

<script>
<!-- 
// 
 var interval="";
 var milisec=0;
 var seconds=300; 
 document.counter.d2.value='500';

function display(){ 
 if (milisec<=0){ 
    milisec=9;
    seconds-=1;
 } 
 if (seconds<=-1){ 
    milisec=0;
    seconds+=1; 
 } 
 else 
    milisec-=1;
    document.counter.d2.value=seconds+"."+milisec;
    setTimeout("display()",100);
    var interval = setInterval("goFunction(\" + seconds + \")", seconds);
} 
display();

goFunction(param)
{
   clearInterval(interval);
   // ... Perform necessary actions
}
-->
</script>

How can I trigger a function after a 2-minute countdown in JavaScript?

Answer №1

Similar questions

What is the reason behind the 'load' event handler not being triggered for an <applet>?

Focusing on the active element in Typescript

Creating a Vue JS 3 Application that can smoothly operate on older versions of Firefox and Chrome

Display the list items within a div only if the height is lower than a separate div

Error: The function res.getHeader is not recognized within the Next.js API environment

Having difficulty utilizing the express.session module in conjunction with HTTPS

The content of the snackbar message remains static and does not update dynamically

Consistentize Column Titles in Uploaded Excel Spreadsheet

Once a WordPress user includes a php file

Navigating through the year selection with your keyboard

I found myself in a bit of a predicament as I tried to transition a petite

Holding off on routing the pathName through the router until the next-page-transitions have been completed

A step-by-step guide to incorporating VeeValidate with vue-i18n

Send the useState function as a prop

AngularJS UI Router: Best Practices for Including the Controller Script

How to send a JSON array to a Node.js cloud function

To manipulate the array in a more complex manner, either add or remove the item based on its existence: if it's already in the array, remove it; if it

Tips for removing all elements from an array using jQuery

What is the most efficient way to utilize a single Google Data Studio template across multiple accounts in a dynamic manner

Node.js web server operating on port 3000 is running a script