jsflot，html5 canvas和setInterval的性能

Question

I am developing a webpage which has 9 jQuery Flot graphs which are updated with

setInterval(function(){
    updateGraph1to8(data1);
}, 10);

setInterval(function(){
    updateGraph9(data2);
}, 10);

and three HTML5 canvas which instead is updated on an event. Two of them are based on data1 so they are drawn inside the event function that supply data1 like:

onData1available(){
    //do math and stuff
    updateCanvas1();
    updateCanvas2();
}

while the remaining is based on data2 and is drawn in the same way.

JS Flot graphs are drawn constantly as soon as the document is ready, they have no lag at all. By the time I activate the canvas (the drawing is activated when a button is pressed), I notice a clear lag in the Flot graphs but none in the canvas. I tried to move the Flot graphs drawing in the event function but everything was lagging as hell. Then I tried to bring the canvases in a timer but it didn't really change anything. My questions are:

1. Am I really reaching a performance bottleneck? (to me it's impossible)
2. What should be the best implementation to follow?
3. How do I enhance my code in order to avoid lag?
4. I thought asynchronous coding was a good way to avoid this thing, then why the timers aren't doing their job? Is it because they are all scheduled at 10ms? Is a sequential delay improving the situation?

SOLUTION:

http://jsfiddle.net/wMkJg/

Answer 1

SOLUTION:

Solved using window.requestAnimationFrame trick