新しい日付を選択したときにsetIntervalを停止して再起動する方法

Question

ここで日付を選択すると、その日付までの時間が表示されます。しかし、私は新しい日付を選択した場合、バグが発生します...新しい日付の値がselctedされたら、関数とsetIntervalを再起動するにはどうすればよいですか？

$(document).ready(function() { 
 

 
    var showOne = new Date(); 
 
    var showTwo = new Date(2016, 10, 14); 
 
    $('#showOne').text(showOne); 
 
    $('#showTwo').text(showTwo); 
 

 
    function calcDate(newDater) { 
 

 
    var tickTock = setInterval(function() { 
 
     var currentDateSec = $.now()/1000; 
 
     var laterDate = newDater; 
 
     // console.log("Later Date: " + laterDate); 
 
     var laterDateSec = laterDate/1000; 
 
     var timeLeft = laterDateSec - currentDateSec; 
 

 
     var sLeft = Math.floor(timeLeft) % 60; 
 
     var mLeft = Math.floor(timeLeft/(60)) % 60; 
 
     var hLeft = Math.floor(timeLeft/(60 * 60)) % 24; 
 
     var dLeft = Math.floor(timeLeft/(60 * 60 * 24)) % 7; 
 
     var wLeft = Math.floor(timeLeft/(60 * 60 * 24 * 7)) % 4; 
 
     var moLeft = Math.floor(timeLeft/(60 * 60 * 24 * 7 * 4)); 
 

 

 
     $('#humandate').text(moLeft + " Month(s) - " + wLeft + " Week(s) - " + dLeft + " Day(s) - " + hLeft + " Hour(s) - " + mLeft + " Mins - " + sLeft + " Sec\(s\)"); 
 

 

 
    }, 1000); 
 

 
    } 
 

 

 
    $("#datepicker").datepicker({ 
 
    onSelect: function(dateText, inst) { 
 

 
     var dateAsString = dateText; //the first parameter of this function 
 
     var dateAsObject = $(this).datepicker('getDate'); //the getDate method 
 
     var date = $("#datepicker").datepicker({ 
 
     dateFormat: 'dd,MM,yyyy' 
 
     }).val(); 
 
     console.log(dateAsString + " --- " + dateAsObject + " --- " + date); 
 
     calcDate(dateAsObject); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js "></script> 
 

 
<p>Date: 
 
    <input type="text" id="datepicker"> 
 
</p> 
 

 
<span id="humandate"></span> 
 
<br/>

Answer 1

あなたはclearInterval(id)ようにすることによって、それをリセットすることができます。

... 

var tickTock; 

function calcDate(newDater) { 
    // if you have set it before, clear it. 
    if (tickTock) { 
     clearInterval(tickTock); 
    } 
    tickTock = setInterval(function() { 
    .... 

Answer 2

でそれをソートさ：

... 

function calcDate(newDater) { 

    $("#datepicker").on('blur' , function(){ clearInterval(tickTock); }); 

    var tickTock = setInterval(function() { 

...