方法一:简单实现
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.addHandleraddHandler(target, eventType, handler) {let fn;if (target.addEventListener) {// 主流浏览器target.addEventListener(eventType, handler, false);} else {// IEtarget.attachEvent(`on${eventType}`, handler);}},
angualar中实现轮询,简洁方式:
原文链接:angular-使用定时器调后台接口 - 胖胖小鱼 - 博客园
这个功能使用了JS里的定时器。JS计时器分为一次性计时器和间隔性触发计时器,此次每隔一秒要调用这个接口,使用的是间隔性触发计时器 setInterval()