大规模请求数据并发问题

1.请求队列

javascript 复制代码
const queue = [];

queue.push();
queue.shift;

class RequestQueue {
    constructor(maxConcurrent) {
        this.maxConcurrent = maxConcurrent; // 最大并发请求数
        this.currentConcurrent = 0; // 当前并发请求数
        this.queue = []; // 请求队列
    add(request) {
        return new Promise(resolve,reject) => {
            this.queue.push({ request, resolve, reject });
            this.processQuese();
        });
}

processQuese() {
    if (this.queue.length > 0 && this.currentConcurrent  < maxConcurrent) {
        const { request, resolve, reject } = this.queue.shift();
        this.currentConcurrent++;
        request() 
            .then(resolve)
            .catch(reject)
            .finaly(() => {
                this.currentConcurrent--;
                 this.processQuese();
            });
    }
   }
}

// 实力请求函数
function fetchData(url) {
    return fetch(url).then(respomse => response.json());
}

// 使用请求队列
constrequestQuese = new RequestQueue(5); // 设定并发请求数为5

const urls = [ 
                "https://api.example.com/data1",
                 "https://api.example.com/data2",
            };

const requests = urls.map(url => () => fetchData((url));
Promise.all(requests.map(request => requestQueue.add(request)))
    .then(results => {
        console.log("所有请求完成", result);
    })
    .catch(error => {
        console.error("请求失败", error);
    });

2.防抖/节流

-防抖(debounce)

-节流 (throttle)

-防抖 (Debounce) : 确保在指定时间内函数只执行一次,常用于输入框的搜索建议

-节流 (Throttle) : 确保在指定时间间隔内函数执行一次,常用于窗口的 resize scroll 事件

javascript 复制代码
function debounce(func, wait) {
    let timeout;
return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        func.apply(this
相关推荐
qq_452396231 分钟前
第十一篇:《前端性能优化体系:从加载到交互的全链路》
前端·性能优化·交互
一晌小贪欢3 分钟前
Python办公17:暴力拆分——按页数或指定范围提取 PDF 核心页面
java·开发语言·python·pdf·excel·数据可视化·python办公
2401_834636994 分钟前
Docker 容器化技术全解:从镜像构建到容器编排的完整教案1
java·docker·容器
Mh4 分钟前
听说我兄弟喜欢跑车,所以必须安排上
前端·javascript·vue.js
zttbee5 分钟前
vue学习(白话功能版)
前端·vue.js·学习·前端框架
qq_426003966 分钟前
多语言新增语种全量测试策略
前端·javascript·python·pycharm·自动化
jjjava2.010 分钟前
初步认识接口测试
java·可用性测试
吠品11 分钟前
TortoiseSVN 状态图标不显示的排查与解决办法
java·服务器·数据库
nicole bai14 分钟前
前端封装el-table及注意点
前端·javascript·vue.js