Pause jquery Function when tab is not active

Question

I have a function that runs while a search is occurring (It is called every 5 seconds). While it is running "Retrieving Results..." Writes out on the page, one letter at a time. That is working fine, but if the user goes to a different tab, and then comes back, the message becomes something like: "Rvsei.tn.rg.i eRveisnugl tRse". Then over the next couple of cycles it goes back to what it is supposed to be. I am wondering if there is a way I can just restart the function when the tab becomes the active tab again. While it is amusing to see this happen, it's not what I intended. Here is the function I have:

var showText = function (target, message, index, interval) {   
if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}

function Loading() {
    $("#loading").html('');
    showText("#loading", "Retrieving Results...", 0, 200);
}

Edit: I am wondering if it has something to do with the function that calls the Loading function. I noticed that it only happens if I am on another tab when it is supposed to refresh, and the longer you are away, the worse it is, which suggests that maybe when you return it tries to call Loading as many times as it was supposed to all at once. This is my timer:

var refreshInterval = 5 * 1000,
isDone = false;

if (!isDone) {
setTimeout(test_function, refreshInterval)
}

So I think I need to figure out how to pause this timer onblur.

Answer 1

I've update my response for fitting your needs. This will works for me. The necessary functions are "blur" and "focus", which you should bind to the window-Object. When leaving, you save the current index. After the user review the tab, the function has to proceed again.

//EDIT:

I've update your fiddle. Check this: http://jsfiddle.net/t6ouo762/3/

<head>
        <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div id="loading"></div>
    <script type="text/javascript">
    var isOnTab = true;
    var myTarget = "#loading";
    var myText = "Retrieving Results...";
    var myIndex = 0;
    var myInterval = 200;

        $(document).ready(function() {

            Loading();
            $(window).bind("blur", function() {
                isOnTab = false;
            });
            $(window).focus(function() {
                if(!isOnTab)
                {
                    isOnTab = true;
                    showText(myTarget,myText,myIndex,myInterval);
                }
            });
        });


        var showText = function (target, message, index, interval) { 
            myIndex = index;
            if (index < message.length && isOnTab) {
                $(target).append(message[index++]);
                setTimeout(function () { 
                    showText(target, message, index, interval); 
                    }, interval);
            }
        }

        function Loading() {
            $("#loading").html('');
            showText(myTarget,myText,myIndex,myInterval);
        }
    </script>
</body>

Pause jquery Function when tab is not active

Question

1 answers

solution1
0 2014-12-17 15:09:41

Pause jquery Function when tab is not active

Question

1 answers

solution1 0 2014-12-17 15:09:41

solution1
0 2014-12-17 15:09:41