定时刷新页面或请求接口

1. 需求:

   由于数据计算量比较大,所以接口请求返回数据可能会比较慢,这时候咋整勒。为了提高用户体验,想到了前端定时刷新,定时器走起~

2. 定时请求接口

  a. 先定义个全局的定时器,取名timer

  b.

// 组件卸载时清空定时器 
componentWillUnmount() {
    clearInterval(this.timer)
  }


timedRefresh = () => {
    clearInterval(this.timer)
    if ( 我是条件 ) {
      this.timer = setInterval(() => {
        fetchSomething(params1, params2)  // 每隔3s请求一次接口
      }, 3000)
    } else {
      clearInterval(this.timer)    // 取消定时器
    }
  }

  

3. 定时刷新页面

  a. 先定义个全局的定时器,取名timer

  b.

// 组件卸载时清空定时器 
componentWillUnmount() {
    clearInterval(this.timer)
  }


timedRefresh = () => {
    clearInterval(this.timer)
    if ( 我是条件 ) {
      this.timer = setInterval(() => {
        window.location.reload()    // 每隔3s刷新整个页面
      }, 3000)
    } else {
      clearInterval(this.timer)    // 取消定时器
    }
  }
原文地址:https://www.cnblogs.com/aloehui/p/9685223.html