CODEWITHSUNDEEP
javascriptjquery
vicenrele
vicenrele

Reputation: 971

Way to stop the running of a Javascript web application when the focus is on other window

Are there any way to stop the running of a Javascript web application when the focus is on other window? For example, If I have AJAX executions in a application web, It'd very efficient stop the running in that situation.

Upvotes: 4

Views: 1409

Answers (4)

Robin Drexler
Robin Drexler

Reputation: 4457

Problem with the page visibility api is, that it's not cross browser compatible. No Safari, no IE<10. https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API

You could try to use the windows focus and blur events. (jQuery Example)

(function() {
    var isFocused = true;
    $(window).focus(function() {
        isFocused = true;
    });

    $(window).blur(function() {
        isFocused = false;
    });

    function doSomeAjax() {
        if (isFocused) {
            doSomething();
        }
    }

});

It's not that fancy as the page visibility api, because it only tells you, whether the tab is focused or not, but it might be enough to achieve, what you're trying to do.

Upvotes: 1

pete
pete

Reputation: 25091

You could use the beforeSend settings to store the jqXHR object in an array and then, on window.blur loop through the array and abort each request. Simplified example below:

$(document).ready(function () {
    var ajaxRequests = [];
    $.ajax({
        "beforeSend": function (jqXHR, settings) {
            ajaxRequests.push(jqXHR);
        },
        //... other settings
    });
    $.ajax({
        "beforeSend": function (jqXHR, settings) {
            ajaxRequests.push(jqXHR);
        },
        //... other settings
    });
    $.ajax({
        "beforeSend": function (jqXHR, settings) {
            ajaxRequests.push(jqXHR);
        },
        //... other settings
    });
    $(window).blur(function () {
        var xhr = null,
            i = 0;
        for (i = ajaxRequests.length - 1; i = 0; i -= 1) {
            xhr = ajaxRequests.pop(); //remove last jqXHR from array and return it
            xhr.abort(); //abort it
        }
    });
});

Upvotes: 0

marekful
marekful

Reputation: 15351

Your question is too theoretical. There's no native way in JS for keeping track of window focus, but it's relatively simple to implement your own.

Once you know if the window has focus at a given point in time, you can use this information in your implementation that continuously fires AJAX requests (most likely in some kind of loop) and skip the firing of the request when window is not focused.

E.g.

var winFocused = false;

window.onfocus = function() {
  winFocused = true;
}
window.onblur = function() {
  winFocused = false;
}

Then in your "loop" or whatever, for e.g.:

setInterval(function() {
  if( ! winFocused) return;

  // Otherwise, if winFocused is true, do what you need...

}, 1000);

Upvotes: 3

CD..
CD..

Reputation: 74176

Using the Page Visibility API

The Page Visibility API performs a simple but important function – it lets your application know when a page is visible to the user. This basic piece of information enables the creation of Web pages that behave differently when they are not being viewed.

Visibility.js - a wrapper for the Page Visibility API

Upvotes: 3

Related Questions