一道字节前端面试题，我直接把Promise的使用功力秀面试官一脸！

han_2025-01-11 22:24

今天我们来研究一道字节跳动的前端面试题，即JavaScript如何实现并发控制。

题目是这样的：要求用JS实现一个带并发限制的异步调度器Scheduler，保证同时运行的任务最多有两个。

它给出的初始代码如下，要求我们实现addTask方法，使之输出结果满足要求。

js 复制代码 
class Scheduler {
  // ...todo
}
const scheduler = new Scheduler(2);
const addTask = (time, name) => {
  scheduler.add(time, name);
};

addTask(1000,"1"); // 1000ms后输出1
addTask(500,"2");  // 500ms后输出2
addTask(600,"3"); // 1100ms后输出3
addTask(400,"4"); // 1400ms后输出4
scheduler.start();

我们先来分析一下这段代码可以得到如下信息：

  1. scheduler是一个构造器，它提供一个构造器入参，限制任务同时并发的数量，它有一个start方法，调用start后，任务会开始执行。它还有一个add方法，往scheduler中添加任务。
  2. addTask函数有两个参数time和name，分别表示任务执行的时间和任务名字。

我们再来依次分析下输出结果：

  1. 1000ms后输出1：这个很好理解，因为第一个任务的执行时间就是1000ms；
  2. 500ms后输出2：这个也好理解，因为第二个任务的执行时间就是500ms；
  3. 1100ms后输出3：这里第三个任务是在1100ms后输出的，是因为任务同时执行的并发数量为2个，所以必须这第三个任务必须等待前两个任务其中一个完成后，才能开始执行，这里是等待了第二个任务执行了500ms，再加上自己本身的执行时间600ms，所以1100ms后才输出3。
  4. 1400ms后输出4：第三个任务开始执行后，这时候会等待任务一和任务三哪个先完成，很现任这时候任务一只剩500ms就执行完了，而任务三却需要600ms执行完，所以任务四会在任务一执行完成后才开始执行，所以任务四需要任务一的1000ms + 本身的400ms总共1400ms后输出4。

这个并发控制就像是你去银行办业务，银行只有2个柜台，所以最多只能有两个人同时办业务，第三个人需要等待前两个人的其中一个办完业务后，才能开始办业务，第四个人的话依次类推。

明白了题目的要求之后，我们这里开始实现：

解题思路一：等任务完成后递归执行下一个任务，并且用变量runningCount控制并发数

先来实现下Scheduler的constructor：

js 复制代码 
class Scheduler {
    constructor(limit) {
        this.tasks = [] // 任务队列
        this.limit = limit // 最大并发数
        this.runningCount = 0 // 当前正在运行的任务个数
    }
}

我们先来实现下添加任务的add方法：

js 复制代码 
class Scheduler {
    // ...
    add(delay, name) {
        const promiseCreator = () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(name)
                    resolve()
                }, delay)
            })
        }
        this.tasks.push(promiseCreator)
    }
    // ...
}

我这里声明了一个promiseCreator函数，它用来在执行的时间后执行任务，并且返回一个promise。

我们还需要一个执行任务的run方法：

js 复制代码 
class Scheduler {
    // ...
   run() {
        // tasks空校验 + 限制并发数
        if (!this.tasks.length || this.runningCount >= this.limit) {
            return
        }
        // 当前正在执行的任务数+1
        this.runningCount++
        // 从 tasks 头部取出一个任务并执行
        this.tasks.shift()().finally(() => {
            // 当前任务已经执行完了，所以 runningCount 需要-1
            this.runningCount--
            // 执行下一个任务
            this.run()
        })
    }
    // ...
}

最后我们需要实现start方法，先取limit个任务并调用run方法开始执行。

js 复制代码 
class Scheduler {
    // ...
  start() {
      for(let i = 0; i < this.limit; i++) {
          this.run()
      }
  }
  // ...
}

完整代码如下：

js 复制代码 
class Scheduler {
    constructor(limit) {
        this.tasks = [] // 任务队列
        this.limit = limit // 最大并发数
        this.runningCount = 0 // 当前正在运行的任务个数
    }
    add(delay, name) {
        const promiseCreator = () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(name)
                    resolve()
                }, delay)
            })
        }
        this.tasks.push(promiseCreator)
    }
    run() {
        // tasks空校验 + 限制并发数
        if (!this.tasks.length || this.runningCount >= this.limit) {
            return
        }
        // 当前正在执行的任务数+1
        this.runningCount++
        // 从 tasks 头部取出一个任务并执行
        this.tasks.shift()().finally(() => {
            // 当前任务已经执行完了，所以 runningCount 需要-1
            this.runningCount--
            // 递归执行下一个任务
            this.run()
        })
    }
    start() {
        for(let i = 0; i < this.limit; i++) {
            this.run()
        }
    }
}

核心思路就是：比如并发数为2个，

  1. 先在start方法中，调用run方法开始执行前两个任务；
  2. 然后在每一个任务执行完后，继续调用run方法递归执行下一个任务。

你可能会有疑问，在我这里runningCount似乎并没取到作用，似乎去掉也能正常得到想要的结果。

但假如start方法被一次性主动调用多次，没有runningCount限制，输出结果就会异常了，有兴趣的小伙伴可以试下。

解题思路二：利用Promise链 + Promise.race

同样的先来实现下Scheduler的constructor：

js 复制代码 
class Scheduler {
    constructor(limit) {
        this.tasks = []
        this.limit = limit
    }
}

我们先来实现下添加任务的add方法，这里只是把任务执行时间delay和任务名称name存到一个对象中：

js 复制代码 
class Scheduler {
    // ...
    add(delay, name)  {
        this.tasks.push({ delay, name })
    }
    // ...
}

再来实现下start方法：

js 复制代码 
class Scheduler {
    // ...
    start() {
        start() {
        // 创建一个只有 limit 个并发量的 任务池
        const pool = this.tasks.slice(0, this.limit).map(({ delay, name }, index) => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log(name)
                    // 这里把当前任务在任务池中的索引传递出去，后续会用到
                    resolve(index)
                }, delay)
            })
        })
        let p = Promise.race(pool)
        for(let i = this.limit; i < this.tasks.length; i++) {
            // 通过for循环形成一条promise链
            p = p.then((index) => {
                // 利用Promise.race拿到任务池中最快完成的任务，在then回调用通过之前存的这个任务在任务池中的索引，用新的任务将它替换
                pool[index] = new Promise((resolve) => {
                    const { delay, name } = this.tasks[i]
                    setTimeout(() => {
                        console.log(name)
                        resolve(index)
                    }, delay)
                })
                // 再利用Promise.race拿到任务池中最快完成的任务
                return Promise.race(pool)
            })
        }
        return p
    }
    }
    // ...
}

完整代码如下：

js 复制代码 
class Scheduler {
    constructor(limit) {
        this.tasks = []
        this.limit = limit
    }
    start() {
        // 创建一个只有 limit 个并发量的 任务池
        const pool = this.tasks.slice(0, this.limit).map(({ delay, name }, index) => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log(name)
                    // 这里把当前任务在任务池中的索引传递出去，后续会用到
                    resolve(index)
                }, delay)
            })
        })
        let p = Promise.race(pool)
        for(let i = this.limit; i < this.tasks.length; i++) {
            // 通过for循环形成一条promise链
            p = p.then((index) => {
                // 利用Promise.race拿到任务池中最快完成的任务，在then回调用通过之前存的这个任务在任务池中的索引，用新的任务将它替换
                pool[index] = new Promise((resolve) => {
                    const { delay, name } = this.tasks[i]
                    setTimeout(() => {
                        console.log(name)
                        resolve(index)
                    }, delay)
                })
                // 再利用Promise.race拿到任务池中最快完成的任务
                return Promise.race(pool)
            })
        }
        return p
    }
    add(delay, name)  {
        this.tasks.push({ delay, name })
    }
}

其核心思路如下：

  1. 先创建一个任务池pool，pool的长度就是并发数量
  2. 在将任务推入到pool中时，通过闭包，将每个任务在pool中的索引保存下来，
  3. 通过for循环形成一条promsie链，promise链的长度就是剩下需要执行的任务的个数，
  4. 通过Promise.race拿到任务池中最快完成的任务，在其then回调用通过之前存的这个任务在任务池中的索引，用新的任务将它替换。

小结

上面介绍了一道字节的面试真题，即如何通过JavaScript实现并发控制，并提供了两种解决方案，第一种方案比较常规一些，相信大家很容易能想到，而第二种实现方式，就需要看到并发控制第一时间就想到使用Promise.race了，再配上promise链，直接秀面试官一脸，哈哈！

除了这两种大家还有其它更巧妙的解题思路么？欢迎大家留言评论！

相关推荐
Mintopia3 分钟前
Three.js 深度冲突：当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农7 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye10 分钟前
🔥JavaScript 入门必知：代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤14 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子18 分钟前
深入理解JavaScript闭包：从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架，如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格（spreadsheet）在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥1 小时前
智能前端新纪元：语音交互技术与安全实践全解析
javascript
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
热门推荐
012024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理02Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面03Coze扣子平台完整体验和实践（附国内和国际版对比）04MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案08华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南