title: Javascript timer for different DOM events in single setInterval method
body: <p>I am using setInterval to update 3 charts for 60 sec time of interval. So I created a global variable i.e. "Updatetimer" and called 3 charts seperately at the time of rendering of elements. So Now, My Charts are being updating in every 60 seconds(this is for "30mins" data). </p>
  
  <p>So far this is good. </p>
  
  <p>Now problem is coming when I am clicking one of the charts to render for different Time i.e for "24hrs" data. So what should happen is Updatetimer should update the data for 24hrs" data for 1st chart and continue on updating "30 mins" data for other two charts.   but as I have calling all charts using single variable i.e. "UpdateTimer" On clearing "UpdateTimer" and calling setInterval for clicked event is simply fetching data for on 1st chart "30mins" data. </p>
  
  <p>I tried to solve this by creating three different Timers for 3 charts and by running setInterval on them seperately, but this would update charts at different Time Interval and will make calls every now and then.</p>
  
  <p>I want to come up with a solution where I can setInterval on charts at init and set the Interval on charts using single variable and when the is an event clicked on the DOM let say "24hrs" data of first chart is clicked. I want to set the update timer on the 1st chart without affecting other charts timer.</p>
  
  <pre><code>// 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// }
  </code></pre>
  
  <p>Any help would be welcome, Thanks</p>