大规模请求数据并发问题

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
相关推荐
markinmarkin1 小时前
Spring 中Bean 的作用域有哪些?
java·后端·spring
山荷枝2 小时前
Java学习第十天
java·学习
kyriewen2 小时前
我排查了一个React内存泄漏——罪魁祸首是这3个被忽略的清理函数
前端·javascript·面试
matlabgoodboy2 小时前
计算机毕设代做|Java Python Matlab APP 全套开发设计
java·python·课程设计
IT_陈寒2 小时前
我又被JavaScript的隐式类型转换坑了
前端·人工智能·后端
sky_8106133 小时前
Oracle ERP 各模块业务管理功能及底层表说明
数据库·oracle
其美杰布-富贵-李3 小时前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
OpenTiny社区3 小时前
GenUI SDK v1.3.0 发布|多框架兼容,一键换物料,渲染器 & 演练场全面增强!
前端·ai编程
用户938515635073 小时前
useRef + Web Worker 实战:React 如何优雅地拥抱多线程
前端·javascript·react.js
他们叫我秃子3 小时前
前端开发转 Go 全栈(五):终于遇到熟人了,Go 的闭包和高阶函数原来这么像 JavaScript
前端·后端·go