使用JavaScript发布订阅设计模式实现Ajax请求节流
2021-03-22 19:28
标签：for rgb 多次 spl 地方 load 请求 逻辑 发送 1. 说明一下主要逻辑 当我们发送多个请求时使用的时同一个接口，并且这个接口支持多个参数获取多个条数据，而我们不想要每次请求一条数据就发送一条请求 而是在指定的时间段类发送一次请求，得到一些数据，然后把这些数据 返回到对应的发起请求的地方 2. 使用场景 比如像QQ聊天会有一个联系人列表，这个列表每个联系人会有一个头像，我们可以通过一个接口获取指定的用户的头像图片链接，也可以一次性获取多个头像链接，只需要有多个用户ID即可 但是一般都是会在联系人列表渲染时，每渲染一个联系人列表发送一次请求，这样就会发送多次请求，造成不必要的浪费，我们选择获取联系人列表之后只发送一次请求就行 3. 实现一个简单的发布订阅者模式 3. 书写Ajax请求函数 4. 准备一个模拟json数据的 data.json 文件 5.发送Ajax请求 6. 返回的数据 使用JavaScript发布订阅设计模式实现Ajax请求节流 标签：for rgb 多次 spl 地方 load 请求 逻辑 发送 原文地址：https://www.cnblogs.com/litings/p/13862612.htmllet event = {
events:[],
/**
* 添加订阅
* @param {[String]} event [description]
* @param {Function} fn [description]
* @return {[undefined]} [description]
*/
on(event, fn){
if(!event || !fn) return;
let hasEvent = this.hasEvent(event);
if(hasEvent){
hasEvent.handler.push(fn);
} else {
this.events.push({
type: event,
handler: [ fn ]
});
}
},
/**
* 发布订阅
* @param {[String]} event [description]
* @param {...[any]} arg [description]
* @return {[undefined]} [description]
*/
emit(event, ...arg){
let hasEvent = this.hasEvent(event);
if(hasEvent){
hasEvent.handler.forEach(fn => fn(...arg));
} else {
console.log(‘该事件还没有订阅‘);
}
},
/**
* 判断该事件是否已经注册
* @param {[String]} event [description]
* @return {Boolean} [description]
*/
hasEvent(event){
return this.events.find(ele=>ele.type === event);
},
/**
* 移除订阅事件
* @param {[type]} event [description]
* @param {Function} fn [description]
* @return {[type]} [description]
*/
removeEvent(event, fn){
if(event && fn){
let eve = this.hasEvent(event);
if(eve){
eve.handler.splice(eve.handler.indexOf(fn), 1);
}
}
if(event && !fn){
for(let i = 0; ithis.events.length; i++){
if(this.events[i].type === event){
this.events.splice(i, 1);
break;
}
}
}
}
}
function ajax(url, data){
clearTimeout(ajax.timer);
if(!ajax.dataArr){
ajax.dataArr = [];
}
ajax.dataArr.push(data);
ajax.timer = setTimeout(()=>{ // 限制在300毫秒内的请求会只请求一次
fetch(url, {
method: ‘POST‘,
body: JSON.stringify(ajax.dataArr)
}).then(res=>res.json()).then(res=>{
event.emit(‘send‘, res);
})
}, 300);
return new Promise((resolve, reject)=>{
event.on(‘send‘, (res) => {
resolve(res.filter(item=>item.id == data.id)[0]);
});
})
}
[{
"id": 1,
"content": "文本内容11111"
},{
"id": 2,
"content": "文本内容22222"
},{
"id": 3,
"content": "文本内容33333"
},{
"id": 4,
"content": "文本内容44444"
},{
"id": 5,
"content": "文本内容55555"
},{
"id": 6,
"content": "文本内容66666"
},{
"id": 7,
"content": "文本内容77777"
},{
"id": 8,
"content": "文本内容88888"
}]
for(let i = 1; i){
ajax(‘./data.json‘, {id: i}).then(res=>{
console.log(res);
})
}
文章标题：使用JavaScript发布订阅设计模式实现Ajax请求节流
文章链接：http://soscw.com/index.php/essay/67654.html