JavaScript模拟队列的用法详解

 更新时间:2023年10月09日 08:25:24   作者:雾恋  
我原本以为JavaScript是不能写队列的,最近发现JavaScript是可以模拟队列的,并且花样还挺多,所以本文将给大家介绍JavaScript模拟队列的基础写法用法,需要的朋友可以参考下

场景

场景一:

有几百条数据需要传递给后端,但是后端每次最多只能接收10条数据

场景二:

在弹出第一个弹框并关闭后再弹第二个弹窗(或者广告一类的)

我想这些需求大家应该都了解过,或者遇到过,我们可能第一反应是通过定时器或者Promise来处理,现在我告诉你完全可以通过队列的方式来处理。我会写一些示例,如果运用到工作中请根据自己的需求进行修改即可。

说明

JavaScript 队列(Queue)是一种先进先出(FIFO)的数据结构,它用于存储按顺序排列的元素,并支持插入新元素和删除元素的操作。队列在计算机科学中有着广泛的应用,例如在操作系统中实现任务调度、在数据压缩中使用哈夫曼编码等。在JavaScript中,队列也常用于实现异步编程和控制流程。 JavaScript队列通常可以通过内置的Array对象实现,或者使用第三方库如queue-lib。Array对象提供了push()和shift()方法,可以模拟队列的入队和出队操作。

简单队列

我们从下面的模拟队列中可以看出,我们在执行的时候makeRequest(模拟请求)是依次开始执行,那么我们想同时执行多个请求呢?我们想间隔一段时间在发送请求呢?那我们接到看下面这个示例。

class RequestQueue {
    constructor() {
        this.queue = []; // 请求队列
        this.running = 0; // 当前正在运行的请求数量
    }
    // 将请求添加到队列中
    enqueue(request) {
        this.queue.push(request);
        this.run(); // 检查是否可以运行新的请求
    }
    // 检查并运行请求
    run() {
        if (this.running !== 0 || !this.queue.length) return;
        const request = this.queue.shift();
        this.execute(request);
        this.running++;
    }
    // 执行请求
    execute(request) {
        request().finally(() => {
            this.running--;
            if (this.queue.length <= 0) return;
            this.run();
        });
    }
}
// 模拟一个异步请求
function makeRequest(id) {
    return new Promise((resolve) => {
        console.log(`正在发送请求 ${id}`);
        setTimeout(() => {
            console.log(`请求 ${id} 完成`);
            resolve(id);
        }, 1000);
    })
}
// 创建请求队列并添加10个请求
const queue = new RequestQueue(1, 100);
for (let i = 1; i <= 10; i++) {
    queue.enqueue(async () => await makeRequest(i));
};

完整队列

我们从该队列中可以看出,我们可以去控制自己的并发量以及间隔时间了,那么我们在考虑下。如果队列执行完成了,我们怎么知道呢?等等。那我们就给他补充完全吧!(这只是我想到的,我没考虑到的你们也可以自己完善哈)

class RequestQueue {
    constructor(limit,delay) {
        this.limit = limit; // 最大并发请求数
        this.delay = delay; // 批次间隔时间(毫秒)
        this.queue = []; // 请求队列
        this.running = 0; // 当前正在运行的请求数量
    }
    // 将请求添加到队列中
    enqueue(request) {
        this.queue.push(request);
        this.run(); // 检查是否可以运行新的请求
    }
    // 检查并运行请求
    run() {
        while (this.running < this.limit && this.queue.length > 0) {
            const request = this.queue.shift();
            this.execute(request);
            this.running++;
        }
    }
    // 执行请求
    execute(request) {
        request().finally(() => {
            this.running--;
            if (this.queue.length > 0) {
                setTimeout(() => {
                this.run();
                }, this.delay);
            }
        });
    }
}
// 模拟一个异步请求
function makeRequest(id) {
    return new Promise((resolve) => {
        console.log(`发起请求 ${id}`);
        setTimeout(() => {
            console.log(`请求 ${id} 完成`);
            resolve(id);
        }, 100);
    })
}
// 创建请求队列并添加10,000个请求
const queue = new RequestQueue(5,1000);
for (let i = 1; i <= 20; i++) {
    queue.enqueue(async () => await makeRequest(i));
};

补充完整队列

我们在监听队列是否完成的时候注意一个事,就是Promise在返回的时候一定要在成功的时候才返回。至于原因,你们可以自己去尝试哈。

class RequestQueue {
    timer = null; // 定时器
    constructor(limit, delay) {
        this.limit = limit; // 最大并发请求数
        this.delay = delay; // 批次间隔时间(毫秒)
        this.queue = []; // 请求队列
        this.running = 0; // 当前正在运行的请求数量
    }
    // 将请求添加到队列中
    enqueue(request) {
        this.queue.push(request);
        this.run(); // 检查是否可以运行新的请求
    }
    // 检查并运行请求
    run() {
        while (this.running < this.limit && this.queue.length > 0) {
            const request = this.queue.shift();
            this.execute(request);
            this.running++;
        }
    }
    // 执行请求
    execute(request) {
        request().finally(() => {
            this.running--;
            if (this.queue.length > 0) {
                setTimeout(() => {
                    this.run();
                }, this.delay);
            }
        });
    }
    // 监听队列是否完成
    isQueueEmpty() {
        return new Promise((resolve, reject) => {
            this.timer = setInterval(() => {
                if (this.queue.length === 0 && this.running === 0) {
                    clearInterval(this.timer);
                    this.timer = null;
                    resolve(true);
                }
            }, 1000);
        })
    }
}
// 模拟一个异步请求
function makeRequest(id) {
    return new Promise((resolve) => {
        console.log(`发起请求 ${id}`);
        setTimeout(() => {
            console.log(`请求 ${id} 完成`);
            resolve(id);
        }, 100);
    })
}
// 创建请求队列并添加10,000个请求
const queue = new RequestQueue(5, 1000);
for (let i = 1; i <= 20; i++) {
    queue.enqueue(async () => await makeRequest(i));
};
// 执行完成返回ture
queue.isQueueEmpty().then(res=>{
    console.log(res);
})

总结

以上就是JavaScript模拟队列的基础写法用法,大家也可以根据你们的需要进行修改和完善。

到此这篇关于JavaScript模拟队列的用法详解的文章就介绍到这了,更多相关JavaScript模拟队列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript AOP编程实例

    JavaScript AOP编程实例

    这篇文章主要介绍了JavaScript AOP编程,实例分析了javascript实现AOP编程的基本技巧,需要的朋友可以参考下
    2015-06-06
  • 怎么在下面的HTML里调用数组cs[]的值

    怎么在下面的HTML里调用数组cs[]的值

    怎么在下面的HTML里调用数组cs[]的值...
    2007-01-01
  • ckeditor一键排版功能实现方法分析

    ckeditor一键排版功能实现方法分析

    这篇文章主要介绍了ckeditor一键排版功能实现方法,结合实例形式分析了ckeditor一键排版相关扩展插件定义、配置与使用方法,需要的朋友可以参考下
    2020-02-02
  • js定时器不准确问题的解决方法

    js定时器不准确问题的解决方法

    本文主要介绍了js定时器不准确问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • javascript之大字符串的连接的StringBuffer 类

    javascript之大字符串的连接的StringBuffer 类

    javascript之大字符串的连接的StringBuffer 类...
    2007-05-05
  • 微信小程序实现聊天室功能

    微信小程序实现聊天室功能

    这篇文章主要为大家详细介绍了微信小程序实现聊天室功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    下面小编就为大家带来一篇JS判断是否为JSON对象及是否存在某字段的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 使用layui的layer组件做弹出层的例子

    使用layui的layer组件做弹出层的例子

    今天小编就为大家分享一篇使用layui的layer组件做弹出层的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • canvas实现爱心和彩虹雨效果

    canvas实现爱心和彩虹雨效果

    本文主要介绍了canvas实现爱心和彩虹雨效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js的es6常用新特性详解

    js的es6常用新特性详解

    ES6(ECMAScript 6,也称为ES2015)是JavaScript的一个重要更新版本,引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发,ES6的主要变化归纳为:语法糖、新机制、更好的语义、更多的内置对象和方法
    2023-11-11

最新评论