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()
方法一:简单实现componentDidMount() { this.props.countFxMissionByStatus(); countSwiftMessage(); }componentWillReceiveProps(nextProps) { const {location} = nextProps; // 判断页面然后在更新的周期中实现轮询 const isSwiftManage = location.pathname.indexOf('
if (res.code == 1) {
// 间隔1秒轮询一次,最多轮询30次,拿到orderPaymentStatus=1,订单支付完成
let hasQueryPaying = false; //接口是否正在调用
this.payQueryTimeout = setInterval(() => {
什么是轮询
轮询一开始应该是CPU调度算法里的概念,通俗来说就是CPU每隔一段时间都问下需不需要服务。这个概念延伸到web服务中也类似,前端每隔一段时间去向服务器请求信息。
为什么需要轮询
那为什么要用轮询呢?其实这里说的也算是轮询的优点。
当前端每隔一段时间都要确认一些信息是否有变化时,就需要用到轮询。毕竟前端要获取到服务器状态变更,要么主动拉、要么让服务器推。主动拉的情况,又分为用户行为触发和我们定时去拉,要想信息尽可能新,肯定不能只等用户的行为去触发,也需要我们每隔一段时间去拉。所以我们就得出轮询第一
这里要实现的功能是:通过扫码微信公众号带参数的二维码,来登录网站。
但很明显,如果ajax不间断的请求服务器,这样会加重服务器的负荷,所以本例采用的是js的setInterval来周期性调用执行一个ajax函数来来向服务器请求数据,但请求成功或者请求一定次数后还未成功时用clearinterval函数清空计时器。
代码和注释如下:(后端采用thinkPHP实现,所以js代码中含有一些thinkPHP的语法规则)
[removed]</scr
// 获取列表数据接口函数
private getTable(page: number, rows: number): void {
let params: any = { page, rows };
if(this.$route.query.unit) {
params.unit = this.$route.query.unit || '';
Object.keys
this.timer=window.setInterval(() => {
setTimeout(() => {
api.setControlResult(id).then((res) => {
if (res.data.code == '500') {
import React,{ useState } from 'react';
import { Button } from '@alife/ascp-design';
import service from '../../service';
const { getBlogsList, getTableData } = service;
function Test() {
const [flag, setF
文章目录目标前端轮询后端轮询:SSE踩坑static 文件夹下的 index.htmlasync awaitform 按钮阻止页面刷新koa-body
目标是做一个实时聊天的工具
前端轮询
实现这个目标的话,可以有多种思路,比较低级的做法就是前端来不断的发送请求给后端
后端轮询:SSE
全称 server send event
客户端不断的发送数据,建立长链接
static 文件夹下的 index.html
如果你在 static 文件夹下 有 index.html 的话,那么当你在浏览器
使用场景:
在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普通的HTTP连接,前后端无法一直保持联系,麻烦的时候可能还需要采用轮询的机制,所以使用WebSocket连接效果还是比较好的。
使用时间:
在界面加载完之后,建上WebSocket连接,此时前端还可以发送普通的HTTP的请求,等到后端处理完之后,通过建立的WebSocket连接返给前端,前端根据返回的数据进行对应的操作。
代码展示:
在这个示例中,我们使用 `uni.request` 函数发起 HTTP 请求,并在请求完成后使用 `setTimeout` 函数来延迟执行轮询函数。这样就可以实现前端 uniapp 轮询请求接口的功能,而无需使用轮询库。
希望这个示例对你有帮助。
Opening socket connection to server 192.168.153.12/192.168.153.12:2181.Will not attempt to authentic
17761
Opening socket connection to server 192.168.153.12/192.168.153.12:2181.Will not attempt to authentic
老大别再贪吃了: