gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:38:27 25 4
gpt4 key购买 nike

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

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

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

我认为这不起作用的原因是我添加了一行,随着时间的推移更新文档标题。当我“销毁”它时,标题表现得很奇怪,就像计时器仍在运行一样,即使我启动它的实际计时器已按我的预期重置。

我如何判断它是否被正确销毁?

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}); 来销毁(或者我认为销毁了它)

更新我更新了 fiddle 以表明即使在插件被“破坏”之后,元素仍在继续更新,这表明某些事情没有按照应有的方式完成。

更新2当我在聊天中提出这个问题时,我被告知我 interval = setInterval(...) 但范围阻止了它

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

最佳答案

最好的猜测是我没有看到您清除间隔:

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

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

// top of your script. 
var interval;

关于javascript - jQuery 在自定义插件上实现销毁方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32469946/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com