How to start javascript setinterval once cleared?
<p>I have a setinterval that runes every 5 seconds. this works fine on page load. </p>

<p>I have the following scenarios:</p>

<ol>
<li>Load page with interval (<strong>WORKS</strong>)</li>
<li>press button and load new content and stopp interval(<strong>WORKS</strong>)</li>
<li>Once the new content is no longer desiered, dissmiss it, return to first    content and start interval again(<strong>DOES NOT WORK</strong>) </li>
<li>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 <strong>BUT</strong> if i would after step 3 change a tab and then return to my original page(execute blur) the interval would start working again.</li>
</ol>

<p><strong>NOTE</strong> all content loading here exept page load is done with ajax calls. </p>

<p>My code:</p>

<p><strong>initializing</strong>:</p>

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

<p><strong>binding function:</strong></p>

<pre><code>    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");
    }
</code></pre>

<p><strong>interval function:</strong></p>

<pre><code>    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));
        }
    }
</code></pre>

<p><strong>the function that stops the interval:</strong></p>

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

        console.log("deleting");

        for (var i = 0; i &lt;= $.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);
        }
    }
</code></pre>

<p><strong>when stopping the interval i also remove the window bindings:</strong></p>

<pre><code>   unBindIntervalEvent: function() {
        $(window).off("focus.mine");
        $(window).unbind("blur");
    }
</code></pre>

<p><strong>Back to step 3:</strong></p>

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

<pre><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);
                });
</code></pre>

<p>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. </p>

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

<p>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. </p>

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