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