首页 > 编程 > JavaScript > 正文

Javascript实现网络监测的方法

2019-11-20 11:57:05
字体:
来源:转载
供稿:网友

本文实例讲述了Javascript实现网络监测的方法。分享给大家供大家参考。具体实现方法如下:

该代码可监测网络是否连接及网速的快慢状态。

(function(){var network = function(){ var monitor = this; /**  * @param {Funcation} speedInterval  */ var speedInterval = null; /**  * @param {Function} networkInterval  */ var networkInterval = null; /**  * @param {Function} reNetworkInterval  */ var reNetworkInterval = null; var time = 5000; /**  * 获取网络连接状态  */ var getConnectState = function(){  return navigator.onLine ? 1 : 0; };  /**  * 网络中断  */ var disconnect = function(){  // TODO ...   console.log("网速中断");  window.clearInterval(reNetworkInterval);  reNetworkInterval = null;  endSpeed();  endNetwork();  window.setTimeout(function(){   reNetworkInterval = window.setInterval(function(){    if (getConnectState() == 1) {     window.clearInterval(reNetworkInterval);     reNetworkInterval = null;     startSpeed();     startNetwork();    } else {     window.clearInterval(reNetworkInterval);     reNetworkInterval = null;     disconnect();    }   }, time);  }, 2 * time); }; /**  * 网络速度  */ var speed = {   /**    * 网速过慢    */   bad : function(){    // TODO ...     console.log("网速过慢");    window.setTimeout(function(){     if(getConnectState() == 1) {      window.clearInterval(networkInterval);      networkInterval = null;      startSpeed();     } else {      disconnect();     }    }, 2 * time);   },   /**    * 网速中等    */   medium : function(){    // TODO ...     console.log("网速中等");   },   /**    * 网速极佳    */   great : function(){    // TODO ...     console.log("网速极佳");   } }; /**  * 开启速度监测  * @private  */ var startSpeed = function(){  window.clearInterval(speedInterval);  speedInterval = null;  if(getConnectState() == 1) {   speedInterval = window.setInterval(function(){    var start = new Date().getTime();    if (getConnectState() == 1) {     var img = document.getElementById("networkSpeedImage");     if (!!!img) {      img = document.createElement("IMG");      img.id = "networkSpeedImage";      img.style.display = "none";      document.body.appendChild(img);     }     try {      img.src = "http://www.baidu.com/img/baidu_jgylogo3.gif?_t=" + new Date().getTime();      img.onload = function(){       var end = new Date().getTime();       var delta = end - start;       if (delta > 200) {        speed.bad();       } else if (delta > 100) {        speed.medium();       } else {        speed.great();       }      };     } catch(e){      speed.bad();     }    } else {     // TODO 网络断开     disconnect();    }   }, time);  }else {   // TODO 网络断开   disconnect();  } }; /**  * 停止速度监测  * @private  */ var endSpeed = function(){  window.clearInterval(speedInterval);  speedInterval = null; }; /**  * 开启网络连接监测  * @private  */ var startNetwork = function(){  if (getConnectState() == 1) {   networkInterval = window.setInterval(function(){    if (getConnectState() == 0) {     disconnect();    }   }, time);  } else{   disconnect();  } }; /**  * 结束网络连接监测  * @private   */ var endNetwork = function(){  window.clearInterval(networkInterval);  networkInterval = null; }; /**  * 网络监控开始  */ this.start = function(){  startNetwork();  startSpeed(); }; /**  * 停止网络监控  */ this.stop = function(){  endSpeed();  endNetwork(); };};  window.network = new network();}).call(this);// 调用的时候,直接调用network.start();

希望本文所述对大家的javascript程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表