About clearInterval and setInterval

About clearInterval and setInterval
0

#1

I am trying to finish the Pomodoro Clock challenge, I stuck with a problem.
here is the link to my project, please check it.

when I click the clock, it begins to timing, then I click the clock again, it stops, but I find the clock cannot stop, and the function “clearInterval(myInterval)” is invalid. I set the return value “myInterval” of “setInterval(myTimer,1000)” as a global variable.

I am confused with the bug.Please give me some guidance, thanks a lot!


#2

You have a small logic error which is causing your code to create another interval whenever you clear an interval.

The first time the clock is clicked, you check if status === true, but it is false, so you do not create the interval. Then you check if status === false. It is, so you assign status the value true and create the interval.

The next time you click the clock, you check if status === true and it is, so you assign false to status and clear the interval. Then (this is the mistake), you check if status === false and it is, so you create the interval again and the clock keeps go.

To fix, you just need to change the 2nd if statement to be an else of the 1st if statement.

Instead of

        if(status === true){ 
            status = false;
            clearInterval(myInterval);

        }
        if(status === false){ // change if to an else
            status = true;
            $("#inner_circle").css("background-image","url(\"..\/PIC\/background.jpg\")");
            $("#inner_circle").css("background-position","center bottom");
            //$("#inner_circle").css("background-size","100% 0%");
            myInterval = setInterval(myTimer,1000);
        }

it should be:

        if(status === true){ 
            status = false;
            clearInterval(myInterval);

        }
        else{
            status = true;
            $("#inner_circle").css("background-image","url(\"..\/PIC\/background.jpg\")");
            $("#inner_circle").css("background-position","center bottom");
            //$("#inner_circle").css("background-size","100% 0%");
            myInterval = setInterval(myTimer,1000);
        }

#3

yes,you are right!! Thanks a lot!!!