前端实现轮询

article/2025/9/9 21:49: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.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()

 

 


http://chatgpt.dhexx.cn/article/4WeVxF9V.shtml

相关文章

NGINX轮询机制的几种形式

前言&#xff1a;总以为轮询就简单的next而已&#xff0c;实际还有几种不同的实现机制。某个客户的源站有几个不同的IP&#xff0c;回源的时候自然是采用的轮询的机制。客户业务上线前&#xff0c;检查源站的联通性发现一个漏网之鱼竟然差点滥竽充数。然而客户的想法确是&#…

事件轮询机制理解

进程与线程 首先简单了解下进程和线程的概念 进程&#xff1a;cpu资源分配的最小的单位&#xff0c;是拥有资源和独立运行的最小单位&#xff0c;程序执行时&#xff0c;会创建一个进程&#xff0c;cpu为其分配资源&#xff0c;并加入进程就绪队列。线程&#xff1a;cpu调度的…

事件轮询机制

事件循环(轮询)机制 js是单线程的所有js代码都是在主线程执行的同步任务进入主线程即会执行异步任务则会进入浏览器的管理模块 (有DOM事件管理模块、ajax请求管理模块、定时器管理模块等)管理模块一直监视异步任务是否满足条件。如果满足条件则会将对应的回调放入回调队列中(c…

IP多播(组播)

一 IP多播的基本概念 IP多播(multicast&#xff0c;也被译为组播)&#xff0c;它是一种一对多的通信方式。与单播相比&#xff0c;多播可以大大节约网络资源。 以视频流媒体服务为例说明单播和多播的区别&#xff0c;如图所示&#xff1a; 图1 单播与多播的比较 (a) 中使用的…

多播

19.1 概述 单播地址标识单个接口&#xff0c;广播地址标识子网上的所有接口&#xff0c;多播地址标识一组接口。单播和广播是编制方案的两个极端(要么一个要么全部)&#xff0c;多播的目的就在于提供一种折衷方案。多播数据报仅由对该数据报感兴趣的接口接收&#xff0c;也就是…

单播 、多播(组播)、广播

作者&#xff1a;yhthu 链接&#xff1a;https://www.jianshu.com/p/cc62e070a6d2#comments 来源&#xff1a;简书 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 目录 单播、多播(组播)、广播、任播单播组播广播任播 单播、多播(组播)、广…

UDP之多播/组播

目录 一.什么是多播(组播)&#xff1f;为什么出现多播(组播)&#xff1f;二.组播地址三.主机网卡对应的编号 ifconfig命令ip ad (ip adress)获取网卡对应的编号四.多播实现 一.什么是多播(组播)&#xff1f;为什么出现多播(组播)&#xff1f; 由上节课讲到的广播&#xff0c;可…

单播、多播和广播经典详解

1 什么是单播、多播和广播 “单播”&#xff08;Unicast&#xff09;、“多播”&#xff08;Multicast&#xff09;和“广播”&#xff08;Broadcast&#xff09;这三个术语都是用来描述网络节点之间通讯方式的术语。那么这些术语究竟是什么意思&#xff1f;区别何在…

多播--概念和编程

11.3 多播 单播用于两个主机之间的端对端通信&#xff0c;广播用于一个主机对整个局域网上所有主机上的数据通信。单播和广播是两个极端&#xff0c;要么对一个主机进行通信&#xff0c;要么对整个局域网上的主机进行通信。实际情况下&#xff0c;经常需要对一组特定的主机进…

单播、多播(主播)、广播简介

单播 简介 单播&#xff08;unicast&#xff09;是指封包在计算机网络的传输中&#xff0c;目的地址为单一目标的一种传输方式。每次只有两个实体相互通信&#xff0c;发送端和接收端都是唯一确定的。它是现今网络应用最为广泛&#xff0c;通常所使用的网络协议或服务大多采用…

IP多播

部分转载自&#xff1a;http://www.firewall.cx/networking-topics/general-networking/107-network-multicast.html 剩下的基本参考谢希仁计算机网络7th 1. 基本概念 IP多播直观上可以按照下图理解&#xff0c;源主机只需要发送一份数据&#xff0c;而网络中的路由器在转发…

多播(组播)、单播、任播和广播

定义 单播(unicast): 是指封包在计算机网络的传输中&#xff0c;目的地址为单一目标的一种传输方式。它是现今网络应用最为广泛&#xff0c;通常所使用的网络协议或服务大多采用单播传输&#xff0c;例如一切基于TCP的协议。组播(multicast): 也叫多播&#xff0c; 多点广播或…

IP多播(计算机网络-网络层)

目录 一对多通信的应用需求 单播 vs 多播 多播路由器&#xff08;Multicast Router&#xff09; IP 多播的一些特点 D 类 IP 地址与以太网多播地址的映射关系 IP多播需要两种协议 互联网组管理协议 IGMP 多播路由选择协议 两种多播路由选择方法 建议的IP多播路由选择协…

组播,多播

组播&#xff0c;多播&#xff1a;当网络中进行了组播网部署后&#xff0c;一个台设备仅需要基于一个流量进行一次封装及可将该流量转发到所有的组员处&#xff0c;这些组员可处在网络的任何位置&#xff1b;对非组员不产生影响。再未进行组播网络部署的环境下&#xff0c;以组…

网络-单播、多播(组播)和广播的区别

网络-单播、多播&#xff08;组播&#xff09;和广播的区别 转载声明 本文大量内容系转载自以下文章&#xff0c;有删改&#xff0c;并参考其他文档资料加入了一些内容&#xff1a; 单播、多播&#xff08;组播&#xff09;和广播的区别 作者&#xff1a;Roger Luocnblogs 带…

【TCP/IP】多播 - 定义、原理及编程实现 (TTL、多播组、多播消息)

目录 多播 多播的原理 多播的数据传输时的特点 TTL 的概念 TTL 和 多播组的配置方法 多播的编程与实现 发送者 接收者 多播 多播是一种介于单播和广播通信之间的技术方式&#xff0c;可以将发送者所需要发送的数据包分别发送给分散在不同子网中的一组接收者。 多播的原…

socket之UDP组播(多播)

1. 概述 1.1 单播用于两个主机间单对单的通信 1.2广播用于一个主机对整个局域网上所有主机上的数据通信 1.3单播和广播是两个极端&#xff0c;要么对一个主机进行通信&#xff0c;要么对整个局域网的主机进行通信 1.4实际情况下&#xff0c;经常需要对一组特定的主机进行通信&a…

IP多播技术详解

文章目录 前言IP多播技术的相关基本概念IP多播地址和多播组 在局域网上进行硬件多播IP多播地址和多播MAC地址映射关系 在因特网上进行IP多播网际组管理协议IGMP多播路由选择协议 前言 随着计算机网络的发展和个人计算机的普及&#xff0c;人们能够方便的在网络上畅游&#xff…

UDP多播

一、多播概念 1.1、多播 多播又称为&#xff1a;组播。 一个人发数据&#xff0c;只有加入到多播组的人接收数据 1.2、多播的特点 1、多播地址标示一组接口 2、多播可以用于广域网使用 3、在IPv4中&#xff0c;多播是可选的 1.3、多播地址 IPv4的D类地址是多播地址…

多播(组播)

什么是多播 单播用于两个主机之间的端对端通信&#xff0c;广播用于一个主机对整个局域网上所有主机上的数据通信。单播和广播是两个极端&#xff0c;要么对一个主机进行通信&#xff0c;要么对整个局域网上的主机进行通信。实际情况下&#xff0c;经常需要对一组特定的主机…