页面浏览器失焦时暂停 setInterval - JavaScript

在进行前后端交互开发时，我们常常需要使用JavaScript中的setInterval函数，该函数可以在一定时间间隔执行指定的代码。但是，当我们的网页在用户没有打开该页面时，也就是该页面浏览器失焦时，setInterval函数仍然在后台执行。这将导致浪费计算机的资源和影响用户体验。因此，我们需要在页面失去焦点时暂停setInterval函数的执行，并在页面重新获得焦点时重新开始执行。

方法一： 使用HTML5 Page Visibility API

使用Page Visibility API可以检查当前页面是否被隐藏，并在页面不可见时暂停setInterval的执行。在页面重新可见时恢复setInterval的执行。

function handleVisibilityChange() {
    if (document.hidden) {
        clearInterval(intervalId);
    } else {
        intervalId = setInterval(function() {
            // 执行你的代码
        }, 1000);
    }
}

var intervalId = setInterval(function() {
    // 执行你的代码
}, 1000);

document.addEventListener("visibilitychange", handleVisibilityChange, false);

该方法需要浏览器支持HTML5 API，适用于现代浏览器，包括Chrome、Firefox、Safari和IE10+。

方法二： 使用页面焦点事件

使用页面onblur和onfocus事件可以检测页面是否失去和获得焦点，并在页面失去焦点时暂停setInterval的执行，在页面获得焦点时恢复setInterval的执行。

function handleBlur() {
    clearInterval(intervalId);
}

function handleFocus() {
    intervalId = setInterval(function() {
        // 执行你的代码
    }, 1000);
}

var intervalId = setInterval(function() {
    // 执行你的代码
}, 1000);

window.addEventListener("blur", handleBlur, false);
window.addEventListener("focus", handleFocus, false);

该方法相对简单，适用于大多数浏览器。

以上两种方法可以根据具体的需求选择使用。无论哪种方法，都可以让你的代码更加高效和环保。