Pomodoro- problem sequencing same function twice

Pomodoro- problem sequencing same function twice
0

#1

I am calling timerF function twice when start button is clicked.
I can see in the console that both functions are working but in the output it seems that
only the timerF function for breakTime is wroking.

I think that the problem is caused by the setInterval method. I’ve tried $.when().done() but couldn’t fix it. BTW i haven’t used $.when() before. Any suggestion on learning sequencing
asynchronous objects will be appreciated.

Here is my codepen:
https://codepen.io/rakibullahsazib/pen/VMXjZa


#2

When the start button is clicked, you call timerF two times right after each other. The first is called with workTime and the second is called with breakTime. Each time timerF, you assign a setInterval to the global variable intervalID. You do start with workTime, since setInterval is asynchronous, it does not wait until it is finished, so the next timerF is called and resets intervalID to the breakTime. If you reverse the calling sequence of the two timerF, it will “appear” that only function for workTime works.


#3

I need both functions to work synchronously. How can I do that?


#4

You only want to start a new timer with a different time (workTime or breakTime), when the current timer is 00:00. You have existing code:

   intervalID = setInterval(function() {
      if (sec === 0) {
         if (min === 0) {
            $("#min").html("00");
            $("#second").html("00");
          //  dfd.resolve(); this line is not needed
            clearInterval(intervalID);
            
            return 0;
         }

Once you clear the interval with clearInterval(intervalID);, you could make a call to timerF on the next line with the applicable time (workTime or breakTime) and type (“work” or “break”).

Then in your start button click event, you would only need to call timerF with workTime and “work” and all future timers are controlled via the timerF function itself.

$("#start").on("click", function() {
   $("#start").attr("hidden","hidden");
   $("#stop").removeAttr("hidden");
   timerF(workTime,"work");
});

Hopefully, this will get you started. I created a modified version of your solution and only had to add a few lines of code to make it work.

Lastly, the following two lines of code can be removed as the are doing nothing for your solution:

var dfd=$.Deferred();

and

dfd.resolve();