Javascript實(shí)現(xiàn)網(wǎng)絡(luò)監(jiān)測(cè)的方法
本文實(shí)例講述了Javascript實(shí)現(xiàn)網(wǎng)絡(luò)監(jiān)測(cè)的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
該代碼可監(jiān)測(cè)網(wǎng)絡(luò)是否連接及網(wǎng)速的快慢狀態(tài)。
(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; /** * 獲取網(wǎng)絡(luò)連接狀態(tài) */ var getConnectState = function(){ return navigator.onLine ? 1 : 0; }; /** * 網(wǎng)絡(luò)中斷 */ var disconnect = function(){ // TODO ... console.log("網(wǎng)速中斷"); 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); }; /** * 網(wǎng)絡(luò)速度 */ var speed = { /** * 網(wǎng)速過慢 */ bad : function(){ // TODO ... console.log("網(wǎng)速過慢"); window.setTimeout(function(){ if(getConnectState() == 1) { window.clearInterval(networkInterval); networkInterval = null; startSpeed(); } else { disconnect(); } }, 2 * time); }, /** * 網(wǎng)速中等 */ medium : function(){ // TODO ... console.log("網(wǎng)速中等"); }, /** * 網(wǎng)速極佳 */ great : function(){ // TODO ... console.log("網(wǎng)速極佳"); } }; /** * 開啟速度監(jiān)測(cè) * @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 網(wǎng)絡(luò)斷開 disconnect(); } }, time); }else { // TODO 網(wǎng)絡(luò)斷開 disconnect(); } }; /** * 停止速度監(jiān)測(cè) * @private */ var endSpeed = function(){ window.clearInterval(speedInterval); speedInterval = null; }; /** * 開啟網(wǎng)絡(luò)連接監(jiān)測(cè) * @private */ var startNetwork = function(){ if (getConnectState() == 1) { networkInterval = window.setInterval(function(){ if (getConnectState() == 0) { disconnect(); } }, time); } else{ disconnect(); } }; /** * 結(jié)束網(wǎng)絡(luò)連接監(jiān)測(cè) * @private */ var endNetwork = function(){ window.clearInterval(networkInterval); networkInterval = null; }; /** * 網(wǎng)絡(luò)監(jiān)控開始 */ this.start = function(){ startNetwork(); startSpeed(); }; /** * 停止網(wǎng)絡(luò)監(jiān)控 */ this.stop = function(){ endSpeed(); endNetwork(); }; }; window.network = new network(); }).call(this); // 調(diào)用的時(shí)候,直接調(diào)用network.start();
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽的相關(guān)資料,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-05-05JavaScript作用域與作用域鏈?zhǔn)褂弥攸c(diǎn)講解
當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí),會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈,作用域鏈的用途是保證對(duì)執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問,下面這篇文章主要給大家介紹了關(guān)于JavaScript作用域與作用域鏈的相關(guān)資料,需要的朋友可以參考下2022-10-10webpack使用Symbol.toStringTag(Symbol.toStringTag用法)
Symbol.toStringTag是一個(gè)內(nèi)置 symbol,它通常作為對(duì)象的屬性鍵使用,對(duì)應(yīng)的屬性值應(yīng)該為字符串類型,這個(gè)字符串用來表示該對(duì)象的自定義類型標(biāo)簽,這篇文章主要介紹了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以參考下2024-02-02js使用cookie實(shí)現(xiàn)記住用戶名功能示例
這篇文章主要介紹了js使用cookie實(shí)現(xiàn)記住用戶名功能,涉及javascript操作cookie讀寫及刪除實(shí)現(xiàn)用戶名的保存功能,需要的朋友可以參考下2019-06-06JavaScript數(shù)組,JSON對(duì)象實(shí)現(xiàn)動(dòng)態(tài)添加、修改、刪除功能示例
這篇文章主要介紹了JavaScript數(shù)組,JSON對(duì)象實(shí)現(xiàn)動(dòng)態(tài)添加、修改、刪除功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)json數(shù)組的添加、刪除、修改操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05JavaScript面向?qū)ο笾w會(huì)[總結(jié)]
看過很多JavaScript書,對(duì)JavaScript的面向?qū)ο笾v的都比較深入,但是并沒有做到深入淺出,總結(jié)了我做的一些JavaScript程序的經(jīng)驗(yàn),以簡(jiǎn)潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶?shí)現(xiàn)。2008-11-11