/**
* 网络状态监控函数
* @param {Function} callback - 状态变化回调,参数格式:{ isOnline: boolean, networkType: string, rtt: number, downlink: number }
* @returns {Object} 包含销毁方法的对象
*/
function monitorNetwork(callback) {
// 初始化网络信息获取(兼容性处理)
const getNetworkInfo = () => {
const connection =
navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
return {
isOnline: navigator.onLine,
networkType: connection?.effectiveType || "unknown",
rtt: connection?.rtt || 0, // 网络延迟(单位ms)
downlink: connection?.downlink || 0, // 下载速度(单位Mbps)
};
};
// 触发回调并返回完整状态信息
const triggerCallback = () => callback(getNetworkInfo());
// 事件监听逻辑
const handleOnline = () => triggerCallback();
const handleOffline = () => triggerCallback();
const handleConnectionChange = () => triggerCallback();
// 绑定事件监听器
window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);
const connection = navigator.connection;
if (connection) connection.addEventListener("change", handleConnectionChange);
// 初始状态检测
triggerCallback();
// 返回销毁方法(避免内存泄漏)
return {
destroy: () => {
window.removeEventListener("online", handleOnline);
window.removeEventListener("offline", handleOffline);
if (connection)
connection.removeEventListener("change", handleConnectionChange);
},
};
}
// 使用示例:启动监控
const networkMonitor = monitorNetwork(
({ isOnline, networkType, rtt, downlink }) => {
console.log(`在线状态: ${isOnline ? "✅" : "❌"}`);
console.log(
`网络类型: ${networkType}, 延迟: ${rtt}ms, 速度: ${downlink}Mbps`
);
}
);
// 销毁监控(如页面卸载时调用)
// networkMonitor.destroy();
使用 JavaScript 实现浏览器网络状态监控函数
于 2025-04-06 10:57:13 首次发布