使用setInterval 定期更新 api 資料會影響效能嗎

javascript

Luis-Chen 2017-11-11 18:45:57 ‧ 7707 瀏覽

分享至

說明

如題我用React.js 寫，不過觀念是相通

componentDidMount是載入component後會執行的function
getAPI是從網址抓取資料下來給component使用
而我想做的事情是讓componentDidMount每100毫秒就執行getAPI
這樣就能做出及時更新資料的效果了

問題

那我想問的是說我這樣一直重複執行抓取API資料會影響效能嗎？

程式碼

  componentDidMount() {
    setInterval(this.getAPi, 100);
  }
  getAPI() {
    axios
      .get(
        `http://ptx.transportdata.tw/MOTC/v2/Bike/Availability/${this.state
          .city}`
      )
      .then(response => {
        console.log(response);
        this.setState({ information: response.data });
        console.log(this.state.information);
      })
      .catch(error => {
        console.log(error);
      });
  }

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

小碼農米爾

iT邦高手 1 級 ‧ 2017-11-11 20:57:53

時間拉太短會，100毫秒覺得有點太短了，
可以把更新時間拉長一點，或使用其他技術，
效能可以分 Client 端和 Server 端，
Client 端可能還好，Server 端用的人越多負擔越大，
小弟我現如果需要做即時更新功能，會用 WebSocket 來做，
推薦一個封裝 WebSocket 的套件 SignalR
http://blog.darkthread.net/post-2013-12-05-signalr-transport-benchmark-bidirection.aspx
WebSocket 目前只有現代瀏覽器支援，
SignalR 很厲害的一點，如果遇到不支援 WebSocket 的瀏覽器或伺服器會自動向下相容其他技術，
WebSocket -> Server Sent Event -> Forever Frame -> Long Polling

SignalR WebSocket 啟動條件: