I'm creating a chat that need to retrieve messages from PHP using AJAX in intervals. The problem is that the users can open multiple tab of different chatroom, and that's going to take a a lot of resource from the server. So, how can I stop a function in the other tabs when the user switches page, then reactive it when they return to the tab. I'm new to coding so please keep the code as simple as possible (NO jQuery please.)

Here is an function test I was trying, but no luck:

function window_active(){
    window.onfocus = function() {
        test()
    };

        window.onblur = function() {
            //stop the script OR change the setTimeout so the functon run less.
        };
    }

    function test(){
        alert('adadasdad');
        setTimeout(function(){}, 10000);
    }

Thanks in advance. (:

Update: requestAnimationFrame() didnt work.

function loop() {
    var div_id = document.getElementById('tester');
    var msg = document.createTextNode("sadksadkjsahdjkasdjkahdjkas");
    div_id.appendChild(msg);

    setTimeout( function() {
        requestAnimationFrame( function() {
            loop();
        } );
    }, 1000 );
}

Update 2: Counldn't find this answer anywhere, and then I got lucky and found this page with the help of ehynds answer about "document.hidden". Thanks ehynds! (:

function loop() {

    //do stuff.

    setTimeout( function() {
        if(document.hasFocus()){
        //"document.hasFocus()" return **true** only if your on the tab.
                loop();
            }
        }, 1000);

        window.onfocus = function() {
            //reactivted the function.
            loop();
        };
    }

Hopes this help someone looking for the answer. (:

I'm creating a chat that need to retrieve messages from PHP using AJAX in intervals. The problem is that the users can open multiple tab of different chatroom, and that's going to take a a lot of resource from the server. So, how can I stop a function in the other tabs when the user switches page, then reactive it when they return to the tab. I'm new to coding so please keep the code as simple as possible (NO jQuery please.)

Here is an function test I was trying, but no luck:

function window_active(){
    window.onfocus = function() {
        test()
    };

        window.onblur = function() {
            //stop the script OR change the setTimeout so the functon run less.
        };
    }

    function test(){
        alert('adadasdad');
        setTimeout(function(){}, 10000);
    }

Thanks in advance. (:

Update: requestAnimationFrame() didnt work.

function loop() {
    var div_id = document.getElementById('tester');
    var msg = document.createTextNode("sadksadkjsahdjkasdjkahdjkas");
    div_id.appendChild(msg);

    setTimeout( function() {
        requestAnimationFrame( function() {
            loop();
        } );
    }, 1000 );
}

Update 2: Counldn't find this answer anywhere, and then I got lucky and found this page with the help of ehynds answer about "document.hidden". Thanks ehynds! (:

function loop() {

    //do stuff.

    setTimeout( function() {
        if(document.hasFocus()){
        //"document.hasFocus()" return **true** only if your on the tab.
                loop();
            }
        }, 1000);

        window.onfocus = function() {
            //reactivted the function.
            loop();
        };
    }

Hopes this help someone looking for the answer. (:

• javascript

• window.requestAnimationFrame – zerkms Commented Oct 7, 2015 at 0:05
• Can you show an example please? :/ – toastext Commented Oct 7, 2015 at 0:17

1 Answer 1

HTML5 visibility API:

document.addEventListener('visibilitychange', function() {
    document.hidden; // whether or not the tab is visible
});