推荐答案
// 监听网络状态变化
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. 示例代码
-- -------------------- ---- -------
-- --------
-- ------------------ -
-------------------- -----
- ---- -
-------------------- -----
-
-- --------
--------------------------------- -- -- -
---------------------
-- ---------------
---
---------------------------------- -- -- -
---------------------
-- ---------------
---
5. 注意事项
- 事件触发频率: 网络状态变化事件可能会频繁触发,特别是在网络不稳定的情况下,因此需要谨慎处理事件回调中的逻辑。
- 性能影响: 如果事件回调中执行的操作较为复杂,可能会影响页面性能,建议将耗时操作放在异步任务中执行。