前端实现轮询

方法一：简单实现componentDidMount() {this.props.countFxMissionByStatus();countSwiftMessage();}componentWillReceiveProps(nextProps) {const {location} = nextProps;// 判断页面然后在更新的周期中实现轮询const isSwiftManage = locat

hongten_chen

7613人浏览 · 2021-09-16 13:55:04

hongten_chen · 2021-09-16 13:55:04 发布

方法一：简单实现

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);
    }
  },

angualar中实现轮询，简洁方式：

原文链接：angular-使用定时器调后台接口 - 胖胖小鱼 - 博客园

这个功能使用了JS里的定时器。JS计时器分为一次性计时器和间隔性触发计时器，此次每隔一秒要调用这个接口，使用的是间隔性触发计时器 setInterval()