单个 setInterval 方法中不同 DOM 事件的 Javascript 计时器

Question

我正在使用 setInterval 以 60 秒的时间间隔更新 3 个图表。所以我创建了一个全局变量，即“Updatetimer”，并在渲染元素时分别调用了 3 个图表。所以现在，我的图表每 60 秒更新一次(这是针对“30 分钟”数据)。

到目前为止这很好。

现在，当我单击其中一个图表以呈现不同时间(即“24 小时”数据)时，问题来了。所以应该发生的是 Updatetimer 应该更新第一个图表的 24 小时数据并继续更新其他两个图表的“30 分钟”数据。但是因为我使用单个变量调用所有图表，即“UpdateTimer”清除“UpdateTimer”并为点击事件调用 setInterval 只是获取第一个图表“30 分钟”数据的数据。

我试图通过为 3 个图表创建三个不同的计时器并分别对它们运行 setInterval 来解决这个问题，但这会以不同的时间间隔更新图表，并且会时不时地进行调用。

我想提出一个解决方案，我可以在初始化时在图表上设置间隔，并使用单个变量在图表上设置间隔，当在 DOM 上单击事件时，假设第一个图表的“24 小时”数据被单击。我想在第一个图表上设置更新计时器而不影响其他图表计时器。

// Demo Code
function init() {
updatetimer = setInterval(function() { function A_30min(); function B_30min(); function C_30min() },60000);
}

events: {
 "click .A_24" : "A_24hr"    //lets say class selector is .A_24

}

function A_30min() { //statement// }
function A_24hr() { 
 clearInterval(updatetimer);
 setInterval(A_24hr, 60000);  
}
function B_30min() { //statement// }
function B_24hr() { //statement// }
function C_30min() { //statement// }
function C_24hr() { //statement// }

欢迎任何帮助，谢谢

Answer 1

除了使用建议的 jquery 数据元素之外，我找到了答案。

我所做的是创建 3 个全局变量，它们使用默认事件或属性进行初始化。现在，当页面加载并呈现 DOM 上的元素并假设用户点击了图表上的任何事件时(假设他/她点击了图表 1 上的 24 小时)所以我正在做的是从该事件触发器获取点击事件并检查触发事件与我的全局变量。因此，如果我的全局变量与点击事件不同，则全局变量将更改为触发的新点击事件。

现在我正在使用 setInterval 调用我的函数，当函数被调用时，它将检查新的当前点击项目，如果它是点击事件，它将调用这些 API，否则将调用默认 API。

Demo:

function init() {
this.current_selected_chartA = "A_30";
this.current_selected_chartB = "B_30";
this.current_selected_chartC = "C_30";
updatetimer = setInterval(function() { function A_30min(); function B_30min(); 
function C_30min() },60000);
}
events: {
"click .A_24, .A_30, .B_24, .B_30, .C_24, .C_30" : "clickEvent"    //lets say user selects any of these selectors
}

clickEvent: function(event) {
if(event.currentTarget.attributes.name.value == "A_24") {
this.current_selected_chartA = "A_24";
this.A(); 
this.B();
this.C();
setInterval(function() { this.A();this.B();this.C();},60000);
} 
else { 
//statement// 
} // same if condition will check current selected events for other events like A_30, B_30, B_24, C_30,and C_24.

function A() { //statement//
 if(this.current_selected_chartA == "A_30"){
 // callA_30 API's
 }
 else {
 // callA_24 API's
 } 
}
function B() { //similar if else condition will follow for function B// }
function C() { //similar if else condition will follow for function B// }