Question

I want to do two things using a countdown in jQuery. I have looked at the delay method but it won’t be applied to an element like shown in the docs.

What I want to do is wait 2 hours and then 30 seconds before the timeout do function A and then after that do function B.

During function A I will be showing a modal where I want to show a message saying you have 30 seconds to respond. And show the 30 counting down before executing function B.

What would be the best and simplest way of doing all of this?

Thanks

Answer 1

If you don’t want to get too messy code-wise, use a countdown plugin such as jCounter and run it for 2 hours and set its fallback (fallback A) to start another instance of the countdown for 30 seconds with the second fallback (fallback B).

Example:

$('.countdown').jCounter({
  customDuration: 60*60*2, //2 hours
  format: 'hh:ss', //display hours and seconds
  fallback: function() { $('.timeLeft').jCounter({ // fallback A
    customDuration: 30, // run for 30 seconds
    format: 'ss', // display only seconds
    fallback : function() { alert("30 seconds are up!") } // fallback B
  }); }
});