locked
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

    Wednesday, November 13, 2013 6:17 AM

Answers

  • 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.
    Thursday, November 14, 2013 9:53 PM

All replies

  • 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.

    Thursday, November 14, 2013 11:56 AM
    Moderator
  • 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

    Thursday, November 14, 2013 4:52 PM
  • 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

    Thursday, November 14, 2013 6:33 PM
  • 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.

    Thursday, November 14, 2013 8:16 PM
  • 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.

    Thursday, November 14, 2013 8:45 PM
  • 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.


    Thursday, November 14, 2013 8:57 PM
  • 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

    Thursday, November 14, 2013 9:18 PM
  • 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.
    Thursday, November 14, 2013 9:29 PM
  • 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.
    Thursday, November 14, 2013 9:53 PM
  • 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.

    Friday, November 15, 2013 9:22 AM
    Moderator
  • 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

    Wednesday, December 4, 2013 7:10 PM