Таймер JavaScript для различных событий DOM в одном методе setInterval - PullRequest
Новая
       8

Таймер JavaScript для различных событий DOM в одном методе setInterval

0 голосов
/ 04 марта 2019

Я использую setInterval, чтобы обновить 3 графика за 60 секунд времени интервала.Поэтому я создал глобальную переменную, т. Е. «Updatetimer», и вызвал 3 диаграммы отдельно во время рендеринга элементов.Итак, теперь мои графики обновляются каждые 60 секунд (это для данных «30 минут»).

Пока это хорошо.

Теперь возникает проблема, когда я нажимаю одну из диаграмм для рендеринга в другое время, то есть для данных за 24 часа.Итак, что должно произойти, Updatetimer должен обновить данные за 24 часа для данных 1-го графика и продолжить обновление данных «30 минут» для двух других графиков, но так как я вызывал все графики с использованием одной переменной, то есть «UpdateTimer» При очистке «UpdateTimer»и вызов setInterval для события clicked - это просто выборка данных для данных 30-минутного графика 1-го графика.

Я попытался решить эту проблему, создав три разных таймера для 3 графиков и запустив на них setInterval, но это обновитграфики на разных временных интервалах и будут время от времени совершать вызовы.

Я хочу найти решение, в котором я могу установить setInterval на диаграммах в init и установить Interval на диаграммах, используя одну переменную, а когдасобытие щелкнуло по DOM, скажем, нажаты данные за 24 часа на первом графике. Я хочу установить таймер обновления на 1-м графике, не затрагивая таймер других графиков. 

// 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// }

Любая помощь будет приветствоваться, спасибо

1 Ответ

0 голосов
/ 07 марта 2019

Я нашел ответ, отличный от предложенного элемента данных jquery.

Я создал 3 глобальные переменные, которые инициализируются событиями или свойством по умолчанию.Теперь, когда страница загружает и отображает элементы в DOM и, скажем, пользователь щелкает по любым событиям на графиках (предположим, что он / она нажал на 24 часа на графике 1), так что я делаю, получая событие click из этого триггера и проверяя запущенныйсобытие с моей глобальной переменной.Так что, если моя глобальная переменная отличается от события click, глобальная переменная изменится на новое сработавшее событие click.

Теперь я вызываю свои функции, используя setInterval, и когда функции вызываются, он проверяет с новым текущим нажатым элементом, если это событие clicked, он вызывает эти 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// }
...