How to start javascript setinterval once cleared?

Question

I have a setinterval that runes every 5 seconds. this works fine on page load.

I have the following scenarios:

1. Load page with interval ( WORKS )
2. press button and load new content and stopp interval( WORKS )
3. Once the new content is no longer desiered, dissmiss it, return to first content and start interval again( DOES NOT WORK )
4. I have saftys suchs as events for window.blur that also stops the interval so that the browser does not commponsate for all the missing intervals if i would change tabs or something. Keep in mind that step 3 did not work BUT if i would after step 3 change a tab and then return to my original page(execute blur) the interval would start working again.

NOTE all content loading here exept page load is done with ajax calls.

My code:

initializing :

        $.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function() {
            $.automation.tanks.tableInit();
        });

binding function:

    bindIntervalEvent: function (target, url, callback) {
        $(window)
            .on("focus.mine",
                function() {
                    $.automation.worker.setUpdateInterval(target, url, callback);
                })
            .on("blur",
                function() {
                    $.automation.worker.stopUpdateInterval();
                }).trigger("focus.mine");
    }

interval function:

    setUpdateInterval: function (target, url, callback) {
        if ($.automation.globals.globalInterval.value.length === 0) {

            $.automation.globals.globalInterval.value.push(window.setInterval(
                function () {
                    var options = {
                        loadTarget: target
                    }
                    $.automation.worker.getView(url,
                        function() {
                            if (callback)
                                callback();
                        },
                        options);
                },
                5000));
        }
    }

the function that stops the interval:

    stopUpdateInterval: function () {
        if ($.automation.globals.globalInterval.value.length === 0)
            return;

        console.log("deleting");

        for (var i = 0; i <= $.automation.globals.globalInterval.value.length; i++) {
            window.clearInterval($.automation.globals.globalInterval.value[i])

            $.automation.globals.globalInterval.value.splice(i, 1);
            console.log($.automation.globals.globalInterval.value.length);
        }
    }

when stopping the interval i also remove the window bindings:

   unBindIntervalEvent: function() {
        $(window).off("focus.mine");
        $(window).unbind("blur");
    }

Back to step 3:

My sucess method in the callback to my getviewfunction is identical to what i execute in the beginning code:

        $(".updatelatest")
            .on("click",
                function () {
                    var _this = $(this);
                    var options = {
                        loadTarget:"#TanksContent"
                    }
                    $.automation.worker.getView("/Tank/GetTanks",
                        function (data) {
                            $(_this).switchClass("col-md-5", "col-md-1", 1000, function() {
                                $(_this).addClass("hidden");
                                $(".search").switchClass("col-md-5", "col-md-12", 1000, "easeInOutQuad");
                            })                                  
                            $.automation.tanks.tableInit();
                            $.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
                                $.automation.tanks.tableInit();
                            });
                            $(window).trigger("blur");
                        }, options);
                });

but this does not start the interval. it is clearly initialized since it works when window.blur is executed for example when I change tab but for some reason this is not working beyond that.

i tried triggering the windows blur event and nothing happened, i tried triggering my custom window event "focuse.mine" but nothing happens.

I did not notice this while developing since I had firebug open and every time i checked scripts or css or the console the blur function was executed so I assumed that my code worked as intended but now that it is deployed I notice this.

My head is pounding beyond reason and I can't for figure out where I have gone wrong.

Answer 1

Well this was a fun one. I simply found that when calling the setUpdateInterval(); function directly it gave me the desiered result.

I realized that the reason I had them split like I did was becaouse of the blur event. "Focus.mine" is triggered to start the inteval again ocne a user comes back to the page.