当我按'home'按钮时，我正试图清除我的倒计时

Question

所以，我的问题是，我想让我的倒计时清除，当我点击'后退'图标。这是如此，如果用户点击返回到计时器页面，它将被重置，而不是从他们回击时继续。

这是代码，我认为应该做的伎俩行：

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

这里是我的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> 

这里是我的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

当你这样做时： $(..).click(clearInterval(..));

JavaScript正在执行clearInterval方法。你需要做的：

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

之后，你需要把这些代码绿茶函数内部的调用clearInterval能够访问countdown变量。这或在greanTea外部声明变量countdown。我建议先做第一个，因为第二个会污染全球范围。

Answer 2

countdown变量在greenTea函数中声明。你必须在函数之外声明它，以便通过点击处理程序访问它。

你也得把jQuery的准备函数内部jQuery函数：

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)); 
    });  
});