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();
}
  1. 使用 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();

猜你喜欢

转载自blog.csdn.net/Beatingworldline/article/details/142459208