Я пытаюсь очистить свой обратный отсчет, когда нажата кнопка «домой»

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

После этого, вам нужно поместить этот код в функции Greentea для clearInterval, чтобы иметь возможность доступа к переменной countdown. Это или объявить переменную countdown вне greanTea. Я рекомендую сделать первый, потому что второй будет загрязнять глобальную область.

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