問題描述

//fetch異步請(qǐng)求函數(shù) function status(response){ if(response.status>=200 && response.status<300){ return Promise.resolve(response); } else{ return Promise.reject(new Error(response.statusText)); } } function json(response){ return response.json(); } function ctrlset(){ fetch('/cmdopen') .then(status) .then(json) .then(function (data) { console.log(’ok’); }) } //請(qǐng)求數(shù)據(jù)函數(shù) function getData(){fetch('/numsum') .then(status) .then(json) .then(function (data) {var num = document.getElementById('numbersum');num.innerHTML = data; })//請(qǐng)求風(fēng)扇是否打開fetch('/feng') .then(status) .then(json) .then(function(data){{# var p = document.getElementById(’fengshan’);#} var feng1 = document.getElementById(’feng1’); var feng0 = document.getElementById(’feng0’); if (data[data.length-1] == 1) { feng1.style.display = 'block'; feng0.style.display = 'none'; }else{ feng1.style.display = 'none'; feng0.style.display = 'block'; } }) //請(qǐng)求寵物是否在屋內(nèi)fetch('/indoor') .then(status) .then(json) .then(function(data){ var p = document.getElementById(’indoor’); var image1 = document.getElementById(’image1’); var image0 = document.getElementById(’image0’); if(data[data.length-1] == 1){ image0.style.display = 'none'; image1.style.display = 'block'; }else{ image1.style.display = 'none'; image0.style.display = 'block'; } }) .catch(function(err){ console.log('Fetch錯(cuò)誤:'+err); }); //請(qǐng)求時(shí)間fetch('/time') .then(status) .then(json) .then(function(data){ // 折線圖濕度 myChart.setOption({ xAxis:{ data:data} }); }) .catch(function(err){ console.log('Fetch錯(cuò)誤:'+err); });//請(qǐng)求溫度數(shù)據(jù)fetch('/tem') .then(status) .then(json) .then(function(data){ //折線圖溫度 myChart.setOption({ series: [{ // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列 name: ’TEM’, data: data }] }); }) .catch(function(err){ console.log('Fetch錯(cuò)誤:'+err); });//請(qǐng)求濕度數(shù)據(jù) fetch('/hum').then(status).then(json).then(function(data){ // 折線圖濕度 myChart.setOption({ series: [{ // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列 name: ’HUM’, data: data }] });}).catch(function(err){ console.log('Fetch錯(cuò)誤:'+err);}); } //定時(shí)更新數(shù)據(jù) setInterval(’getData()’,10);

問題解答

setInterval(’getData()’,10);

你十毫秒抓一次數(shù)據(jù)能不卡么。數(shù)據(jù)還沒回來又發(fā)了2個(gè)出去了 無窮延續(xù)

先確定頁面卡頓的問題。

頁面卡一般都是DOM渲染的問題，F(xiàn)12查查就懂了，不要把鍋都甩給ajax，比如說你ajax一個(gè)html過來，再渲染，那肯定很卡。

跟ajax數(shù)量可能有關(guān)系，但應(yīng)該不是主要原因，因?yàn)楫吘筧jax是異步的，慢還是獲取數(shù)據(jù)量比較大的原因吧，如果是一下子獲取數(shù)據(jù)量比較大的情況的話，建議你們分批次加載，不要一下子取所有數(shù)據(jù)；

如果是ajax太多的情況，那么可以適當(dāng)?shù)姆侄渭虞d，比如原先6個(gè)ajax，分成兩段，第一段的三個(gè)ajax加載好了，再加載下一段

頁面初始化的時(shí)候 如果代碼不可避免 則加loadding解決

使用Promise做延遲處理.

請(qǐng)題主發(fā)頁面代碼，最好附帶 Chrome 的 Timing 截圖。