如何监听网络状态变化事件？

推荐答案

// 监听网络状态变化
window.addEventListener('online', () => {
    console.log('网络已连接');
});

window.addEventListener('offline', () => {
    console.log('网络已断开');
});

本题详细解读

1. online 事件

• 描述: 当浏览器从离线状态切换到在线状态时，会触发 online 事件。
• 使用场景: 可以在网络恢复时执行一些操作，比如重新加载页面或重新发送失败的请求。

2. offline 事件

• 描述: 当浏览器从在线状态切换到离线状态时，会触发 offline 事件。
• 使用场景: 可以在网络断开时执行一些操作，比如提示用户网络已断开或保存未发送的数据。

3. 兼容性

• 支持情况: online 和 offline 事件在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。
• 注意事项: 在某些旧版浏览器中可能需要使用 navigator.onLine 属性来手动检测网络状态。

4. 示例代码

// www.javascriptcn.com code example
// 检测当前网络状态
if (navigator.onLine) {
    console.log('当前网络状态: 在线');
} else {
    console.log('当前网络状态: 离线');
}

// 监听网络状态变化
window.addEventListener('online', () => {
    console.log('网络已连接');
    // 可以在这里执行网络恢复后的操作
});

window.addEventListener('offline', () => {
    console.log('网络已断开');
    // 可以在这里执行网络断开后的操作
});

5. 注意事项

• 事件触发频率: 网络状态变化事件可能会频繁触发，特别是在网络不稳定的情况下，因此需要谨慎处理事件回调中的逻辑。
• 性能影响: 如果事件回调中执行的操作较为复杂，可能会影响页面性能，建议将耗时操作放在异步任务中执行。