jQuery 在自定义插件上实现销毁方法

Posted 2023-05-09

【中文标题】jQuery 在自定义插件上实现销毁方法

【英文标题】：jQuery implement a destroy method on a custom plugin

【发布时间】：2015-12-04 20:32:12

【问题描述】：

我正在为一个内部工具开发一个插件，该工具可以跟踪完成特定任务所需的时间。我正在提供其所用时间的视觉参考，但使用数据库中的时间戳来捕获真实值。

在我正在开发的插件中，我正在尝试构建一个销毁函数，将计数器重置为零。

我这样做只是破坏了启动此插件的原始元素。我想这将允许垃圾收集器清理其他任何东西。

我认为这不起作用的原因是我添加了一行，随着时间的推移更新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); 以破坏（或我认为破坏它的东西）

更新 我更新了小提琴以表明即使在插件被“销毁”之后，元素也会继续更新，这表明某些事情没有按照应有的方式完成。

更新 2 当我在聊天中提出这个问题时，我被告知我是interval = setInterval(...) but scope block it。

我不太确定该怎么做，从那时起就无法真正得到答案。

【参考方案1】：

最好的猜测是我没有看到你清除间隔：

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

但是，您需要在脚本顶部初始化该变量，我没有看到。

// top of your script. 
var interval;

【讨论】：

我确实尝试过给interval 一个全局范围，然后在重置函数中清除它。计时器重置并继续计数。

这是您的建议。 jsfiddle.net/9bf4jmao/15即使重置间隔后它也会继续计数

作为测试，我删除了重新附加克隆元素的部分，并让它清空父容器。这导致计时器继续计数，即使我没有替换原始元素。

就您跟踪总时间与重置时间而言，我想您会希望将累积值存储在元素的数据集中。否则，每次调用 countUp() 时它们都会重置为 0。这不是您的问题的一部分，但这就是计时器跟踪器在开始新任务时重置的原因。

至于跟踪时间，我已经处理好了。提供的代码只是为了解决基本问题。看来您还在我没有尝试过的if(settings.reset)return reset(); 中添加了return。你能解释一下为什么需要 if 语句调用停止它的函数吗？