成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js輪詢及踩過的坑

bang590 / 3037人閱讀

摘要：背景下午四點(diǎn)，天氣晴朗，陽光明媚，等著下班產(chǎn)品我希望頁面上的這個(gè)數(shù)據(jù)實(shí)時(shí)變化開發(fā)，可以，用那個(gè)叫著的東西，再找一個(gè)封裝好框架，如感覺自己好機(jī)智產(chǎn)品要開發(fā)好久開發(fā)嗯，三天，五天，還是產(chǎn)品我希望今天上線開發(fā)，，不能描述的語言，話說為什么不支持表

背景

下午四點(diǎn)，天氣晴朗，陽光明媚，等著下班
產(chǎn)品：我希望頁面上的這個(gè)數(shù)據(jù)實(shí)時(shí)變化
開發(fā)：···，可以，用那個(gè)叫著WebSocket的東西，再找一個(gè)封裝好框架，如：mqtt（感覺自己好機(jī)智）
產(chǎn)品：要開發(fā)好久
開發(fā)：嗯，三天，五天，還是···
產(chǎn)品：我希望今天上線
開發(fā)：···，···，···（不能描述的語言，話說segmentfault為什么不支持表情）
開發(fā)：果斷選擇輪詢

開發(fā)中 



  輪詢的坑

開發(fā)：今晚的月亮真圓啊，下班了···

第二天

產(chǎn)品：我希望這個(gè)實(shí)時(shí)加載，能隨心所欲，我喊它加載就加載，喊它停就停
研發(fā)：(石化中···)

繼續(xù)開發(fā)中 



  輪詢的坑

開發(fā)：（這么難得需求我都實(shí)現(xiàn)了，我是不是已經(jīng)是專家了，我是不是應(yīng)該升職加薪，接著贏娶白富美，走向人生巔峰，哈哈哈）
正沉醉于自己的成果中
產(chǎn)品：你的有bug
開發(fā)：（絕對(duì)不信中，肯定是你握鼠標(biāo)的姿勢(shì)不對(duì)，手感不好），怎么可能有bug，你是不是環(huán)境有問題，還在用ie6，多刷新幾次
產(chǎn)品：···，你按鈕多點(diǎn)幾次，點(diǎn)快點(diǎn)，試試，數(shù)據(jù)會(huì)多次請(qǐng)求
開發(fā)：半信半疑的去嘗試，還真是（好奇怪，檢查了一圈沒有發(fā)現(xiàn)任何問題）

分析過程

一進(jìn)去頁面執(zhí)行start()，start是一個(gè)async函數(shù),使得里面的異步也會(huì)像同步一樣執(zhí)行，函數(shù)的末尾timerId = setTimeout(start, 1000)，1000毫秒后再次執(zhí)行start()，形成了一個(gè)輪詢（這里的每一個(gè)請(qǐng)求之間的間隔肯定是大于1000+500的，至于為什么，可以去了解一下瀏覽器異步執(zhí)行原理）

將setTimeout的id賦值給timerId，點(diǎn)擊按鈕后，清除當(dāng)前定時(shí)器

看似沒有任何問題，找不到問題的時(shí)候就只有一點(diǎn)點(diǎn)試錯(cuò)，最終發(fā)現(xiàn)去掉const { data } = await getData()之后，問題消失，請(qǐng)求的時(shí)間越長(zhǎng)，出現(xiàn)的概率越高
畫個(gè)圖分析一下

先看一下js執(zhí)行過程，按鈕的click事件也相當(dāng)于異步，然后我們?cè)賮砦淖址治鲆幌?，問題出現(xiàn)的原因

bug出現(xiàn)原因

假如沒有const { data } = await getData()這步，點(diǎn)擊的時(shí)候，click的回調(diào)函數(shù)能夠執(zhí)行，說明當(dāng)前js肯定處于空閑狀態(tài)（永遠(yuǎn)記住，js的單線程的），這時(shí)的setTimeout(start, 1000)一定處于異步狀態(tài)(js一次只有執(zhí)行一個(gè)任務(wù))，

clearTimeout(timerId)可以很輕松的清除這次任務(wù)，不會(huì)讓它進(jìn)入js執(zhí)行線程中執(zhí)行

加上const { data } = await getData()之后，如果js現(xiàn)在處于setTimeout的回調(diào)函數(shù)已經(jīng)執(zhí)行并且等待await getData()中，js是空閑的，click可以執(zhí)行，click清除了setTimeout的回調(diào)函數(shù)的執(zhí)行（回調(diào)函數(shù)已經(jīng)執(zhí)行了），沒有清除await getData()回調(diào)函數(shù)的執(zhí)行，代碼會(huì)繼續(xù)執(zhí)行console.log(data)；timerId = setTimeout(start, 1000)，從而不能停止循環(huán)，這就是bug產(chǎn)生的原因

bug產(chǎn)生的時(shí)機(jī)

這就是為什么，請(qǐng)求的時(shí)間越長(zhǎng)，出現(xiàn)的概率越高

解決方案 



  輪詢的坑

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52216.html

相關(guān)文章

  • js輪詢及踩過的坑

    摘要：背景下午四點(diǎn)，天氣晴朗，陽光明媚，等著下班產(chǎn)品我希望頁面上的這個(gè)數(shù)據(jù)實(shí)時(shí)變化開發(fā)，可以，用那個(gè)叫著的東西，再找一個(gè)封裝好框架，如感覺自己好機(jī)智產(chǎn)品要開發(fā)好久開發(fā)嗯，三天，五天，還是產(chǎn)品我希望今天上線開發(fā)，，不能描述的語言，話說為什么不支持表 背景 下午四點(diǎn)，天氣晴朗，陽光明媚，等著下班產(chǎn)品：我希望頁面上的這個(gè)數(shù)據(jù)實(shí)時(shí)變化開發(fā)：···，可以，用那個(gè)叫著WebSocket的東西，再找一個(gè)封...

    phpmatt 評(píng)論0 收藏0

  • 京JS會(huì)議分享

    摘要：本次會(huì)議的大部分資料都可在以下地址下載在上分享了京的一些內(nèi)容會(huì)議主要內(nèi)容為前端的相關(guān)優(yōu)化以及服務(wù)器端的相關(guān)技術(shù)分享。這是這次北京之行的意外收獲，號(hào)稱是下一代應(yīng)用的開發(fā)框架，在會(huì)議中也有不少講師提到這個(gè)框架，現(xiàn)場(chǎng)也有出售關(guān)于這個(gè)框架的書籍。 本次會(huì)議的大部分資料都可在以下地址下載： http://vdisk.weibo.com/u/1744667943 sam_在blog上分享了京J...

    CoderStudy 評(píng)論0 收藏0

  • 使用node子進(jìn)程spawn,exec踩過的坑

    摘要：最后發(fā)現(xiàn)使用子進(jìn)程打開還真的就是使用到一定程度就掛掉。上面的簡(jiǎn)單流程就是啟動(dòng)一個(gè)子進(jìn)程。邏輯就是，記錄子進(jìn)程的大小，一旦超過就掉子進(jìn)程。我們?cè)谑褂脮r(shí)，不知道設(shè)置，默認(rèn)的是當(dāng)我們子進(jìn)程日志達(dá)到時(shí)，自動(dòng)掉了。 showImg(https://segmentfault.com/img/bVrCnh); 如何在項(xiàng)目中實(shí)現(xiàn)熱更新中提到的一個(gè)坑child_process的exec使用問題，下面文章...

    cppprimer 評(píng)論0 收藏0

  • 那些年踩過的坑——node代理解決跨域的問題

    摘要：在實(shí)際開發(fā)中，前后端分離的項(xiàng)目通常會(huì)需要同后臺(tái)開發(fā)人員聯(lián)調(diào)接口，不可避免的會(huì)碰到跨域的問題。 在實(shí)際開發(fā)中，前后端分離的項(xiàng)目通常會(huì)需要同后臺(tái)開發(fā)人員聯(lián)調(diào)接口，不可避免的會(huì)碰到跨域的問題。雖說跨域問題最后基本都是后臺(tái)同事解決的，但是有時(shí)候?yàn)榱粟s時(shí)間，沒轍只有自己來，使用node代理解決 跨域：協(xié)議 域名 端口號(hào) 三個(gè)只要有一個(gè)不一樣就是跨域，也就是不同域名之間的訪問； 通常解決跨域的...

    worldligang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<