當我按'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)); 
    });  
});