按下“主页”按钮时，我试图清除倒数计时

Question

so, my issue is that I am trying to get my countdown to clear when i hit the 'back' icon. This is so that if the user clicks back to the timer page it will be reset, not still continuing from when they hit back.

This is the line of code that i think should be doing the trick:

$('.ui-icon-back').click (clearInterval(countdown));    

here is my HTML:

<!-- /////////////////

Green Tea

////////////////////// -->

    <!--Create section tag-->
    <section data-role="page" id="green">

        <!--Create header tag-->
        <header data-role="header">

            <!--Create h1 tag-->
            <h1> TEA TIME </h1>

                <!--Create a icon that will link back to the home page-->
                <a href="#home" class="ui-btn ui-btn-icon-top ui-icon-back ui-btn-icon-notext">back</a>

<!--End header-->           
</header>

    <!--Create h1 tag that states full steep time-->
    <h1>Green Tea Takes 2 Minutes</h1>

        <!--Show timer duration before timer start-->
        <p id="timedisp">120 sec</p>


<!--Call the countdown-->       
<div class="clock">
</div>

    <!-- Button to trigger the start timer js-->
    <a href="#" id="start">Start</a>

    <!-- Button to trigger the timer restart-->
    <a href="#" id="reset">Reset</a>

<!-- End section tag-->
</section>

Here is my Javascript:

// JavaScript Document

//Green Tea Timer

function greenTea(){


// Set The Duration
    var duration = 120;


// Insert the duration into the div with a class of clock
    $(".clock").html(duration + " sec");  


// Create a countdown interval

    var countdown = setInterval(function (greenTea) {

        // subtract one from duration and test to see
        // if duration is still above zero
        if (--duration) {
            // Update the clocks's message
            $(".clock").html(duration + " sec");
        // Otherwise
        } else {

             // Clear the countdown interval
            clearInterval(countdown);
            // set a completed message
            $(".clock").html("End Your Steep");  

        }

    // Run interval every 1000ms 
    }, 1000);

};


$("a#start").click(greenTea);

$('#start').click(function(greenTea){
    $('#timedisp').hide();
}); 

$('#reset').click(function(greenTea) {
    location.reload();
});

$('.ui-icon-back').click (clearInterval(countdown));    

Answer 1

When you do: $(..).click(clearInterval(..));

JavaScript is immediately executing the clearInterval method. You need to do:

$(..).click(function(){
  clearInterval(..);
});

After that, you need to put that code inside greenTea function for the clearInterval to be able to access the countdown variable. That or declare the variable countdown outside greanTea. I recommend to do the first one because the second one will pollute the global scope.

Answer 2

The countdown variable is declared inside the greenTea function. You have to declare it outside the function for it to be accessible from the click handler.

You'll also have to put your jQuery functions inside the jQuery ready function:

var countdown; 
function greenTea(){
    var duration = 120;
    $(".clock").html(duration + " sec");  

    countdown = setInterval(function (greenTea) {
        if (--duration) {
            $(".clock").html(duration + " sec");
        } else {
            clearInterval(countdown);
            $(".clock").html("End Your Steep");  

        }
    }, 1000);

};

$(function(){
    $("a#start").click(greenTea);

    $('#start').click(function(greenTea){
        $('#timedisp').hide();
    }); 

    $('#reset').click(function(greenTea) {
        location.reload();
    });

    $('.ui-icon-back').click (function(){
        clearInterval(countdown));
    });    
});