定時器輪詢請求,清理定時器

bug以下:
unReadMsgList請求10秒一次,getBmUpdateSettingsListByUserId5秒一次,本應該兩個unReadMsgList之間出現兩次getBmUpdateSettingsListByUserId,可是實際出現了6個getBmUpdateSettingsListByUserId(如圖),
是因爲進入頁面,調用了一次getBmUpdateSettingsListByUserId請求,沒清理定時器,
運行操做的時候,調用了一次getBmUpdateSettingsListByUserId請求,沒清理定時器,
刪除操做的時候,調用了一次getBmUpdateSettingsListByUserId請求,沒清理定時器,就出現了三倍的數量函數

image.png

componentDidMount() {
  this.requestList(); // 請求模型更新表格數據
}
// 查詢列表
requestList = () => {
  _getBmUpdateSettingsListByUserId({
   // 獲取列表請求
  }).finally(()=>{ this.timer = setTimeout(()=>{
      this.requestList()
    },5000)})
}
 
// 刪除請求成功後,請求一次列表
DeleteAlert({
  // 刪除請求
}).then(
   this.requestList()
)

// 運行(添加)請求成功後,請求一次列表
_addBmUpdateSettings({
   // 運行(添加)請求
}).then(
  this.requestList()
)

// 離開頁面的鉤子,清理定時器
componentWillUnmount () {
  clearTimeout(this.timer);
}

解決方案以下: this.requestList()函數中加入清理定時器,其他不變this

requestList = () => {
  clearTimeout(this.timer); // 清理以前的定時器隊列
  _getBmUpdateSettingsListByUserId({
   // 獲取列表請求
  }).finally(()=>{ this.timer = setTimeout(()=>{
     this.requestList()
  },5000)})
}

image.png

相關文章
相關標籤/搜索