項目背景
幫同學課設做實時數(shù)據(jù)展示，同學后端數(shù)據(jù)是檢測實時的充電樁電流，電壓等參數(shù)，然后以折線圖和表格的形式實時展示到前端界面，因為他沒有用websocket的連接方式給我數(shù)據(jù)，所以我要用比較落后原始的每隔一定時間發(fā)起一個請求的方式做到實時展示數(shù)據(jù)
項目展示
github地址:這里!這里!
入坑
一般做實時數(shù)據(jù)請求不采用websocket的話，而使用輪詢的請求有兩種方式，即：
setInterval(function(){方法}, 2000)
這種方法是每過兩秒就自動創(chuàng)建一個異步操作請求數(shù)據(jù)，不管是DOM渲染延遲還是網(wǎng)絡堵塞，都會持續(xù)每隔2秒時間去請求，頗有種“我只管定時請求，哪管它洪水滔天”的味道，所以這個坑我一開始就放棄了
setTimeout(function(){方法}, 2000)
這種方法是方法里面設置一個定時器，2秒后執(zhí)行，然后繼續(xù)在定時器里面繼續(xù)執(zhí)行本身，有點遞歸的味道，不過只有傳遞，沒有回歸的遞歸，因為考慮到dom重新渲染和網(wǎng)絡延遲的問題，我就用了這個方法
踩坑
當我用setTimeout(function(){方法}, 2000)方法后，我發(fā)現(xiàn)剛開始還是好的，折線圖每隔2S數(shù)據(jù)自動刷新一次，后面我再切換充電樁的時候它就會數(shù)據(jù)刷新變快，多次點擊后就變成了折線圖會一秒刷新好幾次
后來我在devtools中尋找原因的時候，發(fā)現(xiàn)當我切換充電樁后，就會多開啟一個請求：簡單來講就是我點擊“充電樁1”，他是會每隔2秒發(fā)起對一個充電樁1的數(shù)據(jù)請求，然后我點擊“充電樁2”，他每隔2秒發(fā)起兩個對充電樁2的數(shù)據(jù)請求，我再點擊回“充電樁1”，他就每隔2秒發(fā)起三個對充電樁1的數(shù)據(jù)請求，再點再加……
請求對象是對的，但是點擊一次會多一個網(wǎng)絡請求，后面也就造成了數(shù)據(jù)刷新很快，如果2秒請求4次就相當于0.5秒刷新一次
填坑
這里出現(xiàn)了一種假象，也就是我每點擊一次，好像就增加了一個線程，然后共同執(zhí)行請求，但是JavaScript是單線程的
axios請求和ajax一樣都是異步執(zhí)行，也就是在主線程同步任務執(zhí)行完畢后執(zhí)行axios內(nèi)部的回調(diào)函數(shù)，setTimeout()的方法也是異步執(zhí)行的，所以又進入等待隊列，axios內(nèi)部執(zhí)行完后再從異步任務隊列中執(zhí)行setTimeout()的函數(shù)，然后我每次切換充電樁的時候，產(chǎn)生一次點擊事件，setTimeout()內(nèi)部又獨立出了一個setTimeout(),再點擊再出現(xiàn)一個，跟細胞分裂一樣
出坑
emmmm……
其實解決方案很簡單:
在vue的data中設置一個標志位
let id=setTimeout()；
this.timeTag = a;
然后在方法開頭
clearTimeout(this.timeTag);
咳咳……就是這么簡單
