H5网页嵌在APP内部 手机锁屏后再打开 setInterval会重复执行

H5网页嵌在APP内部 手机锁屏后再打开 setInterval会重复执行

在H5网页嵌入到APP内部时，如果手机锁屏后再打开，可能会遇到setInterval重复执行的问题。这是因为当应用进入后台或屏幕锁定时，浏览器的定时器可能会暂停或重置，导致重新激活时定时器被重新启动。

问题原因
系统休眠：当手机锁屏时，操作系统可能会将应用置于休眠状态，暂停所有活动，包括JavaScript的定时器。
WebView恢复：当用户解锁手机并返回应用时，WebView可能需要重新加载或恢复页面，这会导致setInterval函数重新执行。
解决方法

1. 使用 visibilitychange 事件
   你可以监听 visibilitychange 事件来检测页面是否可见，并根据页面的可见性来控制 setInterval 的行为。

let intervalId;

function startInterval() {
    
    
    if (intervalId) {
    
    
        clearInterval(intervalId);
    }
    intervalId = setInterval(() => {
    
    
        // 你的定时任务代码
        console.log('定时任务执行');
    }, 1000);
}

function stopInterval() {
    
    
    if (intervalId) {
    
    
        clearInterval(intervalId);
        intervalId = null;
    }
}

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
    
    
    if (document.visibilityState === 'visible') {
    
    
        startInterval();
    } else {
    
    
        stopInterval();
    }
});

// 页面初始加载时启动定时器
if (document.visibilityState === 'visible') {
    
    
    startInterval();
}

2. 使用 pagehide 和 pageshow 事件
   你也可以使用 pagehide 和 pageshow 事件来处理页面隐藏和显示的情况。

let intervalId;

function startInterval() {
    
    
    if (intervalId) {
    
    
        clearInterval(intervalId);
    }
    intervalId = setInterval(() => {
    
    
        // 你的定时任务代码
        console.log('定时任务执行');
    }, 1000);
}

function stopInterval() {
    
    
    if (intervalId) {
    
    
        clearInterval(intervalId);
        intervalId = null;
    }
}

// 监听页面隐藏和显示
window.addEventListener('pagehide', stopInterval);
window.addEventListener('pageshow', startInterval);

// 页面初始加载时启动定时器
startInterval();