基于JS实现任务队列的示例代码

 更新时间:2023年08月25日 11:10:27   作者:编程三昧  
顾名思义,任务队列就是存放任务的队列,队列中的任务都严格按照进入队列的先后顺序执行,所以下面我们就来看看如何基于JS实现任务队列吧

引言

假设有这么一个场景:

  • 前端订阅后台数据的变化,如果发生变化,则触发订阅回调;
  • 回调函数中,会执行一些耗时操作,如:请求接口,发送短信,存历史数据等;
  • 要求以上所有的操作都必须按照订阅触发的顺序执行;

我们都知道,回调本身就是一种异步操作,我们仅仅依靠订阅回调无法保证回调中任务执行顺序的。

为了解决这个问题,我们可以使用任务队列,将回调函数添加到任务队列中,然后按照顺序依次执行。

任务队列的概念

顾名思义,任务队列就是存放任务的队列,队列中的任务都严格按照进入队列的先后顺序执行。

在前一条任务执行完毕后,立即执行下一条任务,直到任务队列清空。

任务队列的基本执行流程如下:

  • 给任务队列添加任务,并判断执行标识;
  • 如果执行标识为 false,则将任务从队列中独立出来;
  • 开始执行任务,将执行标识置为 true;
  • 执行完毕后,判断队列是否为空,如果不为空,则继续执行下一条任务;
  • 直至任务队列清空。

任务队列一直在循环进行如上步骤。

任务队列的 JS 实现

我们选择使用数组来维护队列的执行顺序,按照“先进先出“的原则,依次从数组的第一个元素开始往后执行。

简易代码实现如下:

/** @format */
class TaskQueue {
    constructor() {
        this.queue = [];
        this.isRunning = false;
    }
    /**
     * @description 将任务添加至队列
     * @param {Promise} queueFunction
     * @returns {undefined}
     */
    addQueue(queueFunction) {
        this.queue.push(queueFunction);
        if (!this.isRunning) {
            this.processQueue();
        }
    }
    /**
     * @description 如果队列不为空,则开始处理队列中的任务,本次任务执行完毕后,立刻开始下一条任务的执行
     * @param {}
     */
    processQueue() {
        if (this.queue.length > 0) {
            this.isRunning = true;
            const queueFunction = this.queue.shift();
            queueFunction().finally(() => {
                this.processQueue();
            });
        } else {
            this.isRunning = false;
        }
    }
}

测试

我们使用如下代码来测试上述实现:

let taskQueue = new TaskQueue();
let f1 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f1`, name);
            resolve();
        }, 3000);
    });
};
let f11 = async function () {
    await f1("    任务 1");
};
let f2 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f2`, name);
            resolve();
        }, 2000);
    });
};
let f22 = async function () {
    await f2("    任务 2");
};
let f3 = function (name) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`我是 f3`, name);
            resolve();
        }, 1000);
    });
};
let f33 = async function () {
    await f3("    任务 3");
};
taskQueue.addQueue(f11);
taskQueue.addQueue(f22);
taskQueue.addQueue(f33);
// 依次输出:
// 我是 f1     任务 1
// 我是 f2     任务 2
// 我是 f3     任务 3

如果不使用任务队列,上面的测试应该是按照 f1 -> f2 -> f3 的顺序执行,但是使用了任务队列之后,f1 -> f2 -> f3 的顺序执行被改变了,这是因为任务队列的执行顺序是按照添加的顺序来的,而不是按照执行顺序来的。

总结

任务队列的实现非常简单,但是使用起来却非常灵活,我们可以根据实际需求来决定任务队列的执行顺序,也可以根据实际需求来决定任务队列的执行时机。

到此这篇关于基于JS实现任务队列的示例代码的文章就介绍到这了,更多相关JS任务队列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Cropper.js进阶之实现圆形头像裁剪功能示例

    Cropper.js进阶之实现圆形头像裁剪功能示例

    这篇文章主要为大家介绍了Cropper.js进阶之实现圆形头像裁剪功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序实现列表滚动头部吸顶的示例代码

    微信小程序实现列表滚动头部吸顶的示例代码

    这篇文章主要介绍了微信小程序实现列表滚动头部吸顶的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 一文了解JavaScript中call/apply/bind的使用

    一文了解JavaScript中call/apply/bind的使用

    这篇文章主要介绍了一文了解JavaScript中call/apply/bind的使用,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-07-07
  • JavaScript贪吃蛇小组件实例代码

    JavaScript贪吃蛇小组件实例代码

    本文通过实例代码给大家分享了JavaScript贪吃蛇小组件功能 ,需要的朋友可以参考下
    2017-08-08
  • 自定义PC微信扫码登录样式写法

    自定义PC微信扫码登录样式写法

    这篇文章主要介绍了自定义PC微信扫码登录样式的写法以及做了代码分析,需要的朋友学习下吧。
    2017-12-12
  • javascript和jquery实现用户登录验证

    javascript和jquery实现用户登录验证

    这篇文章主要为大家详细介绍了javascript和jquery分别实现用户登录验证的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Js判断参数(String,Array,Object)是否为undefined或者值为空

    Js判断参数(String,Array,Object)是否为undefined或者值为空

    在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空。如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型,通过 JSON.stringify(data) 进行序列化后再传递
    2013-11-11
  • Js和VUE实现跑马灯效果

    Js和VUE实现跑马灯效果

    这篇文章主要为大家详细介绍了Js和VUE实现跑马灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • JS循环遍历ul中li的点击事件给选中li添加css样式(示例代码)

    JS循环遍历ul中li的点击事件给选中li添加css样式(示例代码)

    对于一个ul中固定的li个数,当点击其中一个li时,改变选中li的颜色;同时改变对应的另一个ul中li的颜色,怎么实现这个功能呢,下面小编给大家带来了js循环遍历ul中li的点击事件,给给选中li添加css样式,感兴趣的朋友一起看看吧
    2023-07-07
  • JavaScript 封装一个tab效果源码分享

    JavaScript 封装一个tab效果源码分享

    本文给大家分享javascript封装一个tab效果源码分享,感兴趣的朋友一起来看看吧
    2015-09-09

最新评论