JS如何实现Scheduler？调度的实现-js教程-PHP中文网

JS如何实现Scheduler？调度的实现

幻夢星雲

发布： 2025-08-18 13:46:01

原创

312人浏览过

Scheduler通过任务队列和执行时机控制实现任务调度，利用setTimeout、Promise等API避免阻塞主线程，可通过任务分解、Web Workers、异步处理和并发限制优化性能，结合try...catch和Promise.catch进行错误处理，确保任务安全执行。

js如何实现scheduler？调度的实现

Scheduler的本质是在特定的时间或满足特定条件时执行任务。JS实现Scheduler，核心在于利用

setTimeout

登录后复制

、

setInterval

登录后复制

、

requestAnimationFrame

登录后复制

等API，结合Promise、async/await等异步处理方式，构建一个可灵活控制任务执行顺序和时间的机制。

实现Scheduler的关键在于任务队列的管理和执行时机的控制。

任务队列：可以是一个数组，用于存储待执行的任务。每个任务通常包含一个函数和一个执行时间。执行时机：Scheduler需要根据任务的执行时间，决定何时执行任务。

class Scheduler {
  constructor() {
    this.queue = [];
    this.running = false;
  }

  add(task, delay = 0) {
    this.queue.push({ task, delay });
    if (!this.running) {
      this.run();
    }
  }

  run() {
    if (this.queue.length === 0) {
      this.running = false;
      return;
    }

    this.running = true;
    const { task, delay } = this.queue.shift();

    setTimeout(() => {
      task();
      this.run(); // 递归调用，执行下一个任务
    }, delay);
  }
}

// 示例
const scheduler = new Scheduler();

scheduler.add(() => console.log('Task 1 executed'), 1000);
scheduler.add(() => console.log('Task 2 executed'), 500);
scheduler.add(() => console.log('Task 3 executed'), 2000);

登录后复制

如何避免Scheduler中的任务阻塞主线程？

任务阻塞主线程是Scheduler设计中需要重点考虑的问题。如果任务执行时间过长，会影响用户体验，甚至导致页面卡顿。

任务分解： 将大型任务分解成多个小任务，分批执行。这样可以避免单个任务占用主线程时间过长。例如，可以使用
```
requestAnimationFrame
```
登录后复制
将渲染任务分帧执行。
Web Workers： 将耗时任务放到Web Workers中执行，避免阻塞主线程。Web Workers运行在独立的线程中，不会影响主线程的运行。
异步处理： 使用Promise、async/await等异步处理方式，避免同步阻塞。例如，可以使用
```
setTimeout
```
登录后复制
或
```
setInterval
```
登录后复制
将任务放到事件循环队列中执行。
任务优先级： 为任务设置优先级，优先执行高优先级任务。这样可以保证重要任务的及时执行。

// 使用Promise和setTimeout避免阻塞
function longRunningTask() {
  return new Promise(resolve => {
    setTimeout(() => {
      // 模拟耗时操作
      for (let i = 0; i < 100000000; i++) {
        // do something
      }
      console.log("Long running task completed");
      resolve();
    }, 0);
  });
}

async function runScheduler() {
  console.log("Starting scheduler");
  await longRunningTask();
  console.log("Scheduler finished");
}

runScheduler();

登录后复制

如何实现一个具有并发限制的Scheduler？

并发限制是指Scheduler同时执行的任务数量不能超过一个设定的最大值。这可以防止Scheduler过度占用系统资源，导致性能下降。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

维护一个正在运行的任务计数器： 每次开始执行一个任务时，计数器加1；任务执行完成后，计数器减1。
在添加任务时，检查计数器是否超过最大并发数： 如果超过，则将任务放入等待队列；如果没有超过，则立即执行任务。
任务执行完成后，检查等待队列是否有任务： 如果有，则从等待队列中取出一个任务执行。

class LimitedScheduler {
  constructor(limit) {
    this.queue = [];
    this.running = 0;
    this.limit = limit;
  }

  add(task) {
    this.queue.push(task);
    this.run();
  }

  run() {
    if (this.running < this.limit && this.queue.length > 0) {
      const task = this.queue.shift();
      this.running++;
      const promise = task();
      promise.then(() => {
        this.running--;
        this.run(); // 递归调用，执行下一个任务
      });
    }
  }
}

// 示例
const limitedScheduler = new LimitedScheduler(2); // 限制并发数为2

const task = (i) => () => new Promise((resolve) => {
  setTimeout(() => {
    console.log(`Task ${i} executed`);
    resolve();
  }, Math.random() * 2000); // 模拟不同执行时间的任务
});

for (let i = 1; i <= 5; i++) {
  limitedScheduler.add(task(i));
}

登录后复制

如何处理Scheduler中的错误？

错误处理是Scheduler设计中不可或缺的一部分。如果任务执行过程中发生错误，Scheduler需要能够捕获并处理这些错误，避免影响其他任务的执行。

try...catch： 在任务执行函数中使用
```
try...catch
```
登录后复制
语句，捕获可能发生的错误。
Promise.catch： 如果任务执行函数返回一个Promise，可以使用
```
Promise.catch
```
登录后复制
方法捕获Promise rejected的错误。
错误处理函数： 定义一个全局的错误处理函数，用于处理Scheduler中发生的错误。

class ErrorHandlingScheduler {
  constructor() {
    this.queue = [];
    this.running = false;
  }

  add(task, delay = 0) {
    this.queue.push({ task, delay });
    if (!this.running) {
      this.run();
    }
  }

  run() {
    if (this.queue.length === 0) {
      this.running = false;
      return;
    }

    this.running = true;
    const { task, delay } = this.queue.shift();

    setTimeout(() => {
      try {
        task();
      } catch (error) {
        console.error("Task execution error:", error);
        // 可以选择重试任务，或者记录错误日志
      } finally {
        this.run(); // 递归调用，执行下一个任务
      }
    }, delay);
  }
}

// 示例
const errorHandlingScheduler = new ErrorHandlingScheduler();

errorHandlingScheduler.add(() => {
  console.log('Task 1 executed');
}, 1000);

errorHandlingScheduler.add(() => {
  throw new Error('Task 2 failed');
}, 500);

errorHandlingScheduler.add(() => console.log('Task 3 executed'), 2000);

登录后复制

以上就是JS如何实现Scheduler？调度的实现的详细内容，更多请关注php中文网其它相关文章！