请选择 进入手机版 | 继续访问电脑版
创作

前端js监听浏览器网络变化

JavaScript  / 只看大图  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-9-15

跳转到指定楼层

资讯新闻通知弹窗公众号首图.jpg


首先,为什么要让前端判断用户的网络状态呢——为了更好的用户体验。


其次,前端能否判断网络状态?有哪些方法?


  • 可以做到渐进式判断,不能做到绝对准确。
  • 使用的是navigator.onLine或navigator.connection.rtt


根据我实际测试所得,


navigator.onLine 无法及时获取真实网络状态,比如手动把网线,使用定时器获取navigator.onLine,始终是true,过很久才变成false(差不多相当于一个ajax的timeout时间)


navigator.connection 可以实时监听到网络变化(延迟2-5秒),但是获取到的网络是一个模糊值比如navigator.connection.rtt 是请求预估延迟xx ms,有时候是0毫秒的延迟,却恰恰是已经断网了。


以我做了一下判断:

  1. const netWorkDownlink = navigator.connection.downlink; // 预估下载速度m/s

  2. <font color="#aa0d91">if</font> (navigator.connection && navigator.connection.onchange === null) {
  3.     navigator.connection.onchange=() => {
  4.       <font color="#aa0d91">if</font> (netWorkDownlink !== navigator.connection.downlink || navigator.connection.rtt === 0) {
  5.          //网络断开
  6.       } <font color="#aa0d91">else</font> <font color="#aa0d91">if</font> (netWorkDownlink === navigator.connection.downlink || navigator.connection.rtt !== 0) {
  7.          //连接到网络
  8.       }
  9.    }
  10. }
复制代码

虽然不太准确,但是目前测试没发现bug,


如果测试出了缺陷或者有更好的方法,欢迎评论。



转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部