国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js輪詢及踩過的坑

phpmatt / 1142人閱讀

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

背景

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

開發中 



  輪詢的坑

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

第二天

產品：我希望這個實時加載，能隨心所欲，我喊它加載就加載，喊它停就停
研發：(石化中···)

繼續開發中 



  輪詢的坑

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

分析過程

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

將setTimeout的id賦值給timerId，點擊按鈕后，清除當前定時器

看似沒有任何問題，找不到問題的時候就只有一點點試錯，最終發現去掉const { data } = await getData()之后，問題消失，請求的時間越長，出現的概率越高
畫個圖分析一下

先看一下js執行過程，按鈕的click事件也相當于異步，然后我們再來文字分析一下，問題出現的原因

bug出現原因

假如沒有const { data } = await getData()這步，點擊的時候，click的回調函數能夠執行，說明當前js肯定處于空閑狀態（永遠記住，js的單線程的），這時的setTimeout(start, 1000)一定處于異步狀態(js一次只有執行一個任務)，

clearTimeout(timerId)可以很輕松的清除這次任務，不會讓它進入js執行線程中執行

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

bug產生的時機

這就是為什么，請求的時間越長，出現的概率越高

解決方案 



  輪詢的坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94375.html

相關文章

  • js輪詢及踩過的坑

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

    bang590 評論0 收藏0

  • 京JS會議分享

    摘要：本次會議的大部分資料都可在以下地址下載在上分享了京的一些內容會議主要內容為前端的相關優化以及服務器端的相關技術分享。這是這次北京之行的意外收獲，號稱是下一代應用的開發框架，在會議中也有不少講師提到這個框架，現場也有出售關于這個框架的書籍。 本次會議的大部分資料都可在以下地址下載： http://vdisk.weibo.com/u/1744667943 sam_在blog上分享了京J...

    CoderStudy 評論0 收藏0

  • 使用node子進程spawn,exec踩過的坑

    摘要：最后發現使用子進程打開還真的就是使用到一定程度就掛掉。上面的簡單流程就是啟動一個子進程。邏輯就是，記錄子進程的大小，一旦超過就掉子進程。我們在使用時，不知道設置，默認的是當我們子進程日志達到時，自動掉了。 showImg(https://segmentfault.com/img/bVrCnh); 如何在項目中實現熱更新中提到的一個坑child_process的exec使用問題，下面文章...

    cppprimer 評論0 收藏0

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

    摘要：在實際開發中，前后端分離的項目通常會需要同后臺開發人員聯調接口，不可避免的會碰到跨域的問題。 在實際開發中，前后端分離的項目通常會需要同后臺開發人員聯調接口，不可避免的會碰到跨域的問題。雖說跨域問題最后基本都是后臺同事解決的，但是有時候為了趕時間，沒轍只有自己來，使用node代理解決 跨域：協議 域名 端口號 三個只要有一個不一樣就是跨域，也就是不同域名之間的訪問； 通常解決跨域的...

    worldligang 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<