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

admin管理员组

文章数量:1023009

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jan 10, 2013 at 13:03 vicenrelevicenrele 97133 gold badges1919 silver badges3838 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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);

Problem with the page visibility api is, that it's not cross browser patible. No Safari, no IE<10. https://developer.mozilla/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.

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
        }
    });
});

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jan 10, 2013 at 13:03 vicenrelevicenrele 97133 gold badges1919 silver badges3838 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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);

Problem with the page visibility api is, that it's not cross browser patible. No Safari, no IE<10. https://developer.mozilla/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.

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
        }
    });
});

本文标签：