JavaScript实现定时任务队列的示例代码

目标

本文将探讨如何利用JavaScript构建一个能够按固定时间间隔连续执行任务的队列机制。核心思路是创建一个名为TaskQueue的类，借助setTimeout函数精确控制每个任务的执行时机。该机制适用于需要定期处理数据或触发周期性事件的场景。

代码

class TaskQueue {
  constructor(delay) {
    this.delay = delay
    this.queue = []
    this.currentTask = null
  }
 
  enqueue(task) {
    this.queue.push(task)
    this.run()
  }
 
  dequeue() {
    if (this.queue.length === 0) {
      return null
    }
    return this.queue.shift()
  }
 
  run() {
    if (this.currentTask) {
      return
    }
    this.currentTask = this.dequeue()
    if (this.currentTask === null) {
      return
    }
    setTimeout(() => {
      console.log(this.currentTask)
      this.currentTask = null
      this.run()
    }, this.delay)
  }
}
 
let taskQueue = new TaskQueue(1000) // 1秒后执行任务，所以延迟设置为1000毫秒
let tasks = [1, 3, 4] // 修改任务时间为1，3，4秒
for (let i = 0; i < tasks.length; i++) {
  setTimeout(() => {
    taskQueue.enqueue(i + 1) // 将任务索引加1，因为任务时间为1，3，4秒，所以任务索引为1，2，3
  }, tasks[i] * 1000) // 将任务时间转换为毫秒并乘以1000，因为setTimeout的延迟参数为毫秒
}

以下代码实现了一个基础的任务队列逻辑，主要功能是在指定的时间间隔后依次执行预定义的任务。接下来将对代码结构进行详细解析。

构造函数 (constructor)：作为对象初始化的入口，该函数接收一个delay参数，用于定义任务之间的等待时长。同时初始化一个空数组this.queue用于存储待处理的任务列表，并定义this.currentTask属性以追踪当前正在执行的任务状态。

enqueue方法：该方法接收一个task参数，代表需要加入队列的任务项。任务入队后，立即调用run方法以启动队列的执行流程。

dequeue方法：负责从队列头部移除并返回第一个任务。若队列为空，则返回null。此操作遵循先进先出（FIFO）原则，确保任务按添加顺序执行。

run方法：这是任务队列的核心逻辑。首先检查this.currentTask是否存在，若存在则直接返回，防止重复执行。接着通过dequeue获取下一个任务并赋值给this.currentTask。随后使用setTimeout设置延迟执行，延迟时长为构造函数中设定的this.delay。延迟结束后，输出当前任务值（示例中为数字），将this.currentTask重置为null，并递归调用run方法以处理队列中的下一个任务。

创建TaskQueue实例并添加任务：在代码后半部分，实例化TaskQueue并设置延迟时间为1000毫秒（即1秒）。定义任务列表[1, 3, 4]，通过for循环遍历该列表。每次循环中，利用setTimeout设定延迟时间（将秒数转换为毫秒），并将任务索引加1后通过enqueue加入队列。

总结

代码创建了一个TaskQueue实例，设定延迟为1000毫秒，并定义了任务列表[1, 3, 4]。通过for循环遍历列表，计算每个任务的延迟时间（秒转毫秒），并使用setTimeout将任务加入队列。这样确保了每个任务在指定的时间间隔后依次执行。

上述示例仅为演示核心思想，旨在解决开发中常见的按固定间隔连续执行一系列任务的需求。这种模式在定时数据处理或周期性事件触发等场景中极具价值，能够方便地管理任务的执行顺序和时间控制。

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