如何用Javascript或jQuery创建一个"无限"数量的独立计时器作为无序列表中的单个列表项?

Question

我试图写一个函数，当执行时(例如用户单击按钮或图像)创建并显示一个新的定时器作为一个无序列表(jQuery可排序列表)的新列表项。它不需要非常精确，所以SetInterval应该工作得很好。它不需要任何停止或重置。我希望用户能够在列表中创建尽可能多的新的独立(计数)计时器(作为列表项)，因为他们想要，理论上(尽管在现实中可能会有少于10-15个在同一时间)。

下面的代码实现了这一点(或者至少在第一次运行时做到了)。随后的点击导致悲伤，因为我怀疑相同的id在"分钟"one_answers"秒"中被使用了不止一次，导致列表项之间的冲突。

function listTimer() {

var sec = 0;

function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval (function(){    
document.getElementById("seconds").innerHTML=pad(++sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
}, 1000);

$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + '<span id="minutes">' + '' + '</span>' + ':' + '<span id="seconds">' + '' + '</span>' + '</li>');      
}); 
}

为了允许多个计时器，我认为每次执行函数时，值应该增加，这样它们就被看作是分开的。因此我试着

Var i = 0;
function listTimer() {

var sec = 0;

function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval (function(){    
document.getElementById("seconds"+i).innerHTML=pad(++sec%60);
document.getElementById("minutes"+i).innerHTML=pad(parseInt(sec/60,10));
}, 1000);

$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + '<span id="minutes"+i>' + '' + '</span>' + ':' + '<span id="seconds"+i>' + '' + '</span>' + '</li>');

i=++;   
}); 
}

在. innerhtml的"秒"+i(和"分钟"=i)的作品，因为如果我离开var i=0，然后硬编码"seconds0"one_answers"minutes0"(而不是"秒"+i等)在span id，定时器按计划生成(一次)。诀窍在于，span id中的"秒"+ i(和"分钟"=i)不像我想象的那样工作。如果我按照上面的代码(例如，在. innerhtml和span id中)留下它，则不会生成列表项。我怀疑问题是在增加span id。

对" span id= "进行寻址以增加它(多种方式)似乎没有帮助。

我试着声明和插入一个变量没有运气:

var newSeconds= “seconds” +i;
var newMinutes= “seconds” +i;

$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + '<span id=newMinutes >' + '' + '</span>' + ':' + '<span id=newSeconds>' + '' + '</span>' + '</li>');

我已经尝试更改span的id，就在添加之前:

document.getElementById("seconds").setAttribute("id", "seconds" +i);
document.getElementById("minutes").setAttribute("id", "minutes" + i);

或

document.getElementById("seconds").id("seconds" +i);
document.getElementById("minutes").id ("minutes" + i);

或

var newSeconds= “seconds” +i;
var newMinutes= “seconds” +i;
document.getElementById("seconds").setAttribute("id", newSeconds);
document.getElementById("minutes").setAttribute("id", newMinutes);

或这些的组合，例如，在。id和。setattribute中的newSeconds/newMinutes周围加上引号。

，但我似乎不能使append方法工作，并在每次单击触发器时创建一个新的独立列表计时器。计时器到处跳(或不)在执行函数时多次。

我试着搜索javascript或jQuery的方法来做到这一点，但我似乎只能看到以前的问题，围绕一定数量的计时器(和硬编码他们，例如timer1, timer2等)，而不是一个"无限制"计时器的数目。我看过关于Javascript和jQuery的书，但似乎找不到解决方案。

我希望我已经给出了一个最小的可重复的例子。我显然忽略了一些基本的问题，但目前我是无意识的无能。有人愿意告诉我我的方法的错误，并帮助我得到的功能工作吗?

Answer 1

我认为这个问题源于你通过Id属性引用计时器-Id属性应该每页出现一次，所以让它出现在每个计时器中肯定会引起一些混乱。

我也会推荐一个不同的组织结构。以下是我对伪代码的想法(将实现留给您)

const $timerContainerDiv = $("…"); // the place where timers live
var timers = []; // this is an array containing all of your timers
// function to add a new timer to the array
var addTimer = function(int minutes, int seconds, int title) {
// html that defines the actual structure of the timer, 
// including elements for hours and minutes, each identifiable
// by a js class, and each one including a data attribute giving its value
// for example:
var $timer = $("<div class='timer' data-minutes='" + minutes + "' data-seconds='" + seconds + "' title='" + title + "'>");  
timers.push(timer);  
}
// now define a timer function to update all timers once per second
var updateTimers = function() {

// update each timer, decrementing one second
$.each(timers, function(index, val) {
var $timer = $(val);
var minutes = $timer.data("minutes");
var seconds = $timer.data("seconds");
var title = $timer.attr("title");
seconds--;
// need logic for when seconds goes negative to reset to 59 and decrement minutes
// need logic for when timer done, etc
$timer.empty();
$timer.append("<span>" + title + ": " + minutes + ":" + seconds + " remaining</span>");
});
setTimeout(updateTimers,1000); // call itself
}
updateTimers(); // get the whole thing started