setInterval and setTimeout issues

Question

I'm using setInterval and setTimeout for some animation on canvas.

setInterval(drawLeftLine, 30);

setInterval(rightLine, 30);

setTimeout(drawCircle, 50);  //drawCircle also uses setInterval function inside it to animate circle drawing.

When I run my project, animation starts and finishes as set time when I click on first canvas. I've 9 canvas on my HTML page. As I start clicking next canvases, the animation gets slower and slower for each successive clicks.

I reload the same page and first click takes too long to response or start animation. Animation becomes too slow as if the app is unresponsive. What is the problem? What do I need to do?

---

sonal

Answer 1

Hi Sonal,

It seems to be a performance issue, it's hard to say why it is so. Simply from your code, I did not see anything can cause such issue, you set a looping drawing for left line every 30 seconds and right line every 30 seconds, also draw the circle for one canvas, in total there are 9 canvas, should not be any problem with memory usage. Could you provide me a sample for testing?

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

If you don't know about it, you could investigate using the HTML UI Responsivness profiler.

http://msdn.microsoft.com/en-us/library/windows/apps/dn194502.aspx

Answer 3

Hi James,

Thanks for the reply. I tried to see through HTML UI Responsiveness profiler, as suggested by Mike. But I don't understand it yet. So I've uploaded my project to skydrive. The link is : https://skydrive.live.com/redir?resid=F4CAEFCD620982EB!1554&authkey=!AFskQdjidSu2iQs

Please give it a look and help me to figure out this problem. I'm trying hard to learn animation in Windows Apps.

Thanks and Regards

Sonal

---

sonal

Answer 4

You should be able to improve perf by using requestAnimationFrame instead of setTimeout/setInterval. I suggest testing that to see if it solves some of your perf issues.

Links:

IE team:

http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html

blog post:

http://dev.bennage.com/blog/2012/12/07/game-dev-01/

Example of usage of requestAnimationFrame:

    var requestId;

    function animAction(args) {

        requestId = window.requestAnimationFrame(animFrame);
        cancelAnim();

    }

    // Here's your loop
    function animFrame(args) {

       // update canvas

       requestId = window.requestAnimationFrame(animFrame);
    }

    // One way to cancel it...
    function cancelAnim(args) {

        setTimeout(function () {
            window.cancelAnimationFrame(requestId);
            spinning = false;

        }, someDelay);
    }

Check Christopher's blog for a more complete example.

Answer 5

I downloaded your app and ran it through the JavaScript Memory Analyzer. It appears to me there is a memory leak (Also, the HTML performance analyzer shows you are using 100% CPU after game starts).

Memory analyzer:

http://msdn.microsoft.com/en-us/library/windows/apps/jj819178.aspx

I'm not certain about the cause, but the analyzer shows (among other things) two CanvasRenderingContext3D objects getting added. I'm suspicious about this; that may or may not be OK. It may be easier for you to interpret the data since you know your app well. Try the tutorial (link) using your app.

Answer 6

I suggest you avoid reloading the same page, as in this code:

    function yesPlay() {
        appData.clearAsync();
        WinJS.Navigation.navigate("pages/ttt/singleplayer/singleplayer.html");
    }

I've seen a thread on this forum about problems when reloading that result in a new instance of the page. I notice you have a navigator.js and navigator1.js. Only navigator.js is used, though, correct? It would be a mistake to have two of those files in use.

Answer 7

Yes, only navigator.js is used. It is  the one from win 8  version.

I need to reload the page, once the game is done. If I don't do it like above, then how can I do it?

Thanks for looking into this.

Sonal

 

---

sonal

Answer 8

It does seem easy to just call WinJS.Navigation.navigate again, but in case there's an issue with that, you could instead do all your initialization of the page in another function (e.g.,"initialize()"). From ready(), you call initialize(). Then, when you want to start a new game, you also just call initialize() instead of reload the page. If you do this, make sure you are not creating extra objects each time or they will behave like a memory leak. In some of my test apps, I destroy and recreate DOM elements to avoid problems, but that is probably overkill.

Answer 9

There may be a simpler cause of your perf issue: setInterval() docs indicate you need to use clearInterval() to cancel the Timers. I think that might be the issue. You should still use requestAnimationFrame if you can.

Answer 10

Hi Sonal,

I run your app, it takes more than 150M, there is memory limitation for each app. I agree with Mike, maybe you need try requestAnimationFrame. take a look at this blog: http://blogs.msdn.com/b/windowsappdev/archive/2012/04/03/how-to-improve-performance-in-your-metro-style-app.aspx. also some profiling stuff when testing the winjs app.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 11

I changed my animation function to use requestAnimationFrame and also added setTimeoutfunction to stop it after certain time. But now, it doesn't draw lines on the canvas. I tried to debug and it runs through my animation function but never draws lines.

Also, cancelAnim function as given here does not stop requestAnimationFrame function. It keeps going on going.

I run my programs outside Windows 8 (as an independent javascript - html5 programs) and they run smoothly. But inside my app, it gives problems as above. How do I solve it?

---

sonal