js輪詢及踩過的坑

背景

下晝四點，天氣晴朗，陽光明媚，等着放工
產物：我願望頁面上的這個數據及時變化
開闢：···，可以，用誰人叫着WebSocket的東西，再找一個封裝好框架，如：mqtt（覺得本身好機靈）
產物：要開闢良久
開闢：嗯，三天，五天，照樣···
產物：我願望本日上線
開闢：···，···，···（不能形貌的言語，話說segmentfault為何不支持臉色）
開闢：堅決挑選輪詢

開闢中

開闢：今晚的玉輪真圓啊，放工了···

第二天

產物：我願望這個及時加載，能為所欲為，我喊它加載就加載，喊它停就停
研發：(石化中···)

繼承開闢中








停息





開闢：（這麼難過需求我都完成了，我是否是已是專家了，我是否是應當升職加薪，接着贏娶白富美，走向人生頂峰，哈哈哈）
正沉醉於本身的效果中
產物：你的有bug
開闢：（絕對不信中，肯定是你握鼠標的姿態不對，手感不好），怎樣可能有bug，你是否是環境有題目，還在用ie6，多革新頻頻
產物：···，你按鈕多點頻頻，點快點，嘗嘗，數據會屢次要求
開闢：將信將疑的去嘗試，還真是（好新鮮，搜檢了一圈沒有發明任何題目）

剖析歷程

1. 一進去頁面實行start()，start是一個async函數,使得內里的異步也會像同步一樣實行，函數的末端timerId = setTimeout(start, 1000)，1000毫秒后再次實行start()，形成了一個輪詢（這裏的每個要求之間的距離肯定是大於1000+500的，至於為何，可以去相識一下瀏覽器異步實行道理）
2. 將setTimeout的id賦值給timerId，點擊按鈕后，消滅當前定時器

看似沒有任何題目，找不到題目的時刻就只要一點點試錯，終究發明去掉const { data } = await getData()以後，題目消逝，要求的時候越長，湧現的幾率越高
畫個圖剖析一下

先看一下js實行歷程，按鈕的click事宜也相當於異步，然後我們再來筆墨剖析一下，題目湧現的緣由

bug湧現緣由

1. 假如沒有const { data } = await getData()這步，點擊的時刻，click的回調函數可以實行，申明當前js肯定處於餘暇狀況（永久記着，js的單線程的），這時候的setTimeout(start, 1000)肯定處於異步狀況(js一次只要實行一個使命)，
2. clearTimeout(timerId)可以很輕鬆的消滅此次使命，不會讓它進入js實行線程中實行
3. 加上const { data } = await getData()以後，假如js如今處於setTimeout的回調函數已實行而且守候await getData()中，js是餘暇的，click可以實行，click消滅了setTimeout的回調函數的實行（回調函數已實行了），沒有消滅await getData()回調函數的實行，代碼會繼承實行console.log(data)；timerId = setTimeout(start, 1000)，從而不能住手輪迴，這就是bug發生的緣由

bug發生的機遇

這就是為何，要求的時候越長，湧現的幾率越高

解決方案








停息