locked
How to stop a setInterval function when navigating away from hub page?

    Question

  • Hi. In my hub.js file I have a setInterval function which is executing a peek animation every 5s.

        WinJS.UI.Pages.define("/pages/hub/hub.html", {
            processed: function (element) {
                return WinJS.Resources.processAll(element);
            },
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                var hub = element.querySelector(".hub").winControl;
                hub.onheaderinvoked = function (args) {
                    args.detail.section.onheaderinvoked(args);
                };
                hub.onloadingstatechanged = function (args) {
                    if (args.srcElement === hub.element && args.detail.loadingState === "complete") {
                        hub.onloadingstatechanged = null;
                        hub.element.focus();
                    }
                }
    
                // TODO: Initialize the page here.
                
    
                // Activate animation every 5s
                setInterval(function () { animation1() }, 5000);
    
    
            },
          
            unload: function () {
                // TODO: Respond to navigations away from this page.
            },
    
            updateLayout: function (element) {
                /// <param name="element" domElement="true" />
    
                // TODO: Respond to changes in layout.
            },
        });
    I want to stop the function when I navigate away from the hub page because every time I come back to the page, the function is executed again and the animation goes crazy.

    I tried this:

            // TODO: Initialize the page here.
    
            // Activate animation every 5s
            var myAnim = setInterval(function () { animation1() }, 5000);
            return myAnim;
    
        },
    
        unload: function () {
            // TODO: Respond to navigations away from this page.
            clearInterval(myAnim);
        },
    But I'm getting myAnim is undefined error. How should I write the code?

    Tuesday, November 04, 2014 10:52 AM

Answers

  • Hello,

    The returned myAnim variable never finds its way to the unload() function. You need to store it somewhere, the easiest solution might be the following:

         // Activate animation every 5s
            this.animationIntervalId = setInterval(function () { animation1() }, 5000);
        },
    
        unload: function () {
            // TODO: Respond to navigations away from this page.
            clearInterval(this.animationIntervalId);
        },
    This keeps the animationIntervalId stored in this instance of this hub component - there should actually be one animation running per component, so this makes sense. Both functions are run in the same context, so 'this' points to the same object there. Another approach would be to store the id as a local variable separately otherwise, but then one needs to be careful with not making it accidentally a global variable and so on.

    • Marked as answer by bliks07 Wednesday, November 05, 2014 10:06 AM
    Tuesday, November 04, 2014 4:21 PM

All replies

  • Hello,

    The returned myAnim variable never finds its way to the unload() function. You need to store it somewhere, the easiest solution might be the following:

         // Activate animation every 5s
            this.animationIntervalId = setInterval(function () { animation1() }, 5000);
        },
    
        unload: function () {
            // TODO: Respond to navigations away from this page.
            clearInterval(this.animationIntervalId);
        },
    This keeps the animationIntervalId stored in this instance of this hub component - there should actually be one animation running per component, so this makes sense. Both functions are run in the same context, so 'this' points to the same object there. Another approach would be to store the id as a local variable separately otherwise, but then one needs to be careful with not making it accidentally a global variable and so on.

    • Marked as answer by bliks07 Wednesday, November 05, 2014 10:06 AM
    Tuesday, November 04, 2014 4:21 PM
  • Oh! Silly I am. It's good. Thank you so much.
    Wednesday, November 05, 2014 10:08 AM