jQuery реализовать метод destroy на пользовательском плагине

Question

Я работаю над плагином для внутреннего инструмента, который отслеживает, сколько времени требуется для работы над конкретными задачами. Я представляю визуальную ссылку на время, когда она была сделана, но с использованием временных меток в базе данных, чтобы фиксировать истинные значения.

В плагине, над которым я работаю, я пытаюсь создать функцию destroy, которая сбрасывает счетчик обратно до нуля.

Как я это сделал, был просто уничтожен исходный элемент, с которого был запущен этот плагин. Я решил, что это позволит сборщику мусора убрать что-нибудь еще.

Причина, по которой я не думаю, что это работает, потому что я добавил строку, которая обновляет document title по мере продвижения по времени. Когда я «Уничтожаю» его, название действует на все фанки, как будто таймер все еще идет, хотя фактический таймер, с которого я начал, сброшен, как я и ожидал.

Как я могу определить, правильно ли оно уничтожено?

http://jsfiddle.net/9bf4jmao/3/

// BEGIN THE PLUGIN 
var globalContainer; 
(function($) { 

$.fn.upCount = function(options, callback) { 
    var settings = $.extend({ 
     startTime: null, 
     offset: null, 
     reset: null, 
     resume: null 
    }, options); 

    // Save container 
    var container = this; 
    globalContainer = container.parent().html(); 

    // get the current date 
    var currentDate = function() { 
     // get client's current date 
     var date = new Date(); 

     // turn date to utc 
     var utc = date.getTime() + (date.getTimezoneOffset() * 60000); 

     // set new Date object 
     var new_date = new Date(utc + (3600000 * settings.offset)) 

     return new_date; 
    }; 

    // Define some global vars 
    var original_date = currentDate(); 
    var target_date = new Date('12/31/2020 12:00:00'); // Count up to this date 

    // Are we resetting our counter? 
    if(settings.reset){ 
     reset(); 
    } 

    // Do we need to start our counter at a certain time if we left and came back? 
    if(settings.startTime){ 
     resumeTimer(new Date(settings.startTime)); 
    } 

    // Reset the counter by destroying the element it was bound to 
    function reset() { 
     var timerContainer = $('[name=timerContainer]'); 
     timerContainer.empty().append(globalContainer).find('.time').empty().append('00'); 
    } 

    // Given a start time, lets set the timer 
    function resumeTimer(startTime){ 
     original_date = startTime; 
    } 

    // Start the counter 
    function countUp() { 

     // Set our current date 
     var current_date = currentDate(); 

     // difference of dates 
     var difference = current_date - original_date; 
     //console.log(original_date) 

     if (current_date >= target_date) { 
      // stop timer 
      clearInterval(interval); 
      if (callback && typeof callback === 'function') callback(); 
      return; 
     } 

     // basic math variables 
     var _second = 1000, 
      _minute = _second * 60, 
      _hour = _minute * 60, 
      _day = _hour * 24; 

     // calculate dates 
     var days = Math.floor(difference/_day), 
      hours = Math.floor((difference % _day)/_hour), 
      minutes = Math.floor((difference % _hour)/_minute), 
      seconds = Math.floor((difference % _minute)/_second); 

     // fix dates so that it will show two digets 
     days = (String(days).length >= 2) ? days : '0' + days; 
     hours = (String(hours).length >= 2) ? hours : '0' + hours; 
     minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes; 
     seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds; 

     // based on the date change the refrence wording 
     var ref_days = (days === 1) ? 'day' : 'days', 
      ref_hours = (hours === 1) ? 'hour' : 'hours', 
      ref_minutes = (minutes === 1) ? 'minute' : 'minutes', 
      ref_seconds = (seconds === 1) ? 'second' : 'seconds'; 

     // set to DOM 
     container.find('.days').text(days); 
     container.find('.hours').text(hours); 
     container.find('.minutes').text(minutes); 
     container.find('.seconds').text(seconds); 

     container.find('.days_ref').text(ref_days); 
     container.find('.hours_ref').text(ref_hours); 
     container.find('.minutes_ref').text(ref_minutes); 
     container.find('.seconds_ref').text(ref_seconds); 

     // Update our title 
     document.title = 'Task Tracker - ' + days +'.'+hours+':'+minutes+':'+seconds; 
    }; 

    // start 
    interval = setInterval(countUp, 1000); 
}; 

})(jQuery); 
// END THE PLUGIN 

Что я делаю звонит $('.countdown').upCount({reset:true}); для того, чтобы уничтожить (или то, что я думал, уничтожил его)

UPDATE Я обновил скрипку, чтобы показать, что даже после того, как плагин «уничтожен», элемент продолжает обновляться, что свидетельствует о том, что что-то не было сделано так, как должно было быть.

UPDATE 2 Когда я поднял этот вопрос в чате, мне сказали, что я interval = setInterval(...) but scope block it.

Я не был уверен, что с этим делать, и с этого момента не мог получить ответ.

Answer 1

догадка, что я не вижу, что вы очистив интервал:

// in your reset function, you should be stopping the interval: 
clearInterval(interval); 

Тем не менее, необходимо инициализировать эту переменную в верхней части вашего сценария, который я не вижу.

// top of your script. 
var interval;