标签：const pollingDataInterval 实现 轮询 props clearInterval TIME 前端

方法一：简单实现

componentDidMount() {
    this.props.countFxMissionByStatus();
    countSwiftMessage(); 
  }

componentWillReceiveProps(nextProps) {
    const {location} = nextProps;
    // 判断页面然后在更新的周期中实现轮询
    const isSwiftManage = location.pathname.indexOf('swiftManage') > 0;
    if (isSwiftManage) {
      if (this.pollingInterval) {
        window.clearInterval(this.pollingInterval);
      }
      this.pollingInterval = setInterval(() => {
        this.props.countSwiftMessage();
      }, POLLING_TIME);
    } else {
      window.clearInterval(this.pollingInterval);
    }
  }

方法二：完善的方式

const POLLING_TIME = 1000 * 30; // 轮询时间，每30秒轮询一次
const INVALID_TIME = 1000 * 60 * 30; // 轮询失效时间，用户不活跃则取消轮询
const UPDATE_LAST_ACTIVE_TIME = 1000 * 60; // 更新用户最新活动时间，每1分钟更新一次

  componentDidMount() {
    this.props.countTotal(); 
    this.setLastActiveTimeFunc = _.throttle(this.setLastActiveTime, UPDATE_LAST_ACTIVE_TIME);
  }

  componentWillReceiveProps(nextProps) {
    const { location: { key } }=nextProps;
   if( key !== this.props.location.key){
        this.props.countTotal();     
        this.lastActiveTime = new Date();
        this.setPollingTimer();
        this.watchUserActive();
   }

  }

componentWillUnmount() {
    this.clearPollingTimer();
    this.clearEventHandler();
  }

  watchUserActive = () => {
    helper.addHandler(document, 'mousedown', this.setLastActiveTimeFunc);
    helper.addHandler(document, 'mousemove', this.setLastActiveTimeFunc);
  };

  setLastActiveTime = () => {
    this.lastActiveTime = new Date();

    if (!this.pollingDataInterval) {
      this.setPollingTimer();
    }
  };

  setPollingTimer = () => {
    const { clientKey } = this.state;
    if (this.pollingDataInterval) {
      clearInterval(this.pollingDataInterval);
    }

    this.pollingDataInterval = setInterval(() => {
      const now = new Date();
      const { countTotal} = this.props;
      if (now - this.lastActiveTime < INVALID_TIME) {
         countTotal({ clientKey });
      } else {
        clearInterval(this.pollingDataInterval);
        this.pollingDataInterval = null;
      }
    }, POLLING_TIME);
  };

  clearEventHandler = () => {
    helper.removeHandler(document, 'mousedown', this.setLastActiveTimeFunc);
    helper.removeHandler(document, 'mousemove', this.setLastActiveTimeFunc);
  };

  clearPollingTimer = () => {
    if (this.bookKeeperInterval) {
      clearInterval(this.bookKeeperInterval);
    }
    if (this.pollingDataInterval) {
      clearInterval(this.pollingDataInterval);
    }
  };


///helper.addHandler

 addHandler(target, eventType, handler) {
    let fn;
    if (target.addEventListener) {
      // 主流浏览器
      target.addEventListener(eventType, handler, false);
    } else {
      // IE
      target.attachEvent(`on${eventType}`, handler);
    }
  },

标签：const,pollingDataInterval,实现,轮询,props,clearInterval,TIME,前端
来源： https://blog.csdn.net/zjq_1234/article/details/120327035

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。