JavaScript并发控制_Promise限流与防抖策略-js教程-PHP中文网

JavaScript并发控制_Promise限流与防抖策略

夢幻星辰

发布： 2025-11-18 18:42:06

原创

745人浏览过

Promise限流与防抖结合可有效控制异步任务并发。首先通过PromisePool限制同时执行的任务数量，避免服务器压力过大；再利用防抖函数延迟执行，过滤高频触发事件，确保只有最后一次调用生效；两者组合适用于搜索、上传等场景，提升系统稳定性与用户体验。

javascript并发控制_promise限流与防抖策略

在处理大量异步任务时，JavaScript中的并发控制至关重要。如果不加以限制，同时发起过多请求可能导致接口限流、服务器压力过大或浏览器卡顿。通过Promise限流和防抖策略，可以有效管理异步任务的执行节奏，提升系统稳定性与用户体验。

Promise限流：控制并发数量

限流的核心是控制同一时间运行的Promise数量。我们可以封装一个并发控制器，接收任务数组和最大并发数，按需执行任务。

实现思路：

维护一个正在执行的任务队列
当有空位时，从待执行队列中取出新任务
任务完成后自动触发下一个任务

示例代码：

class PromisePool {
  constructor(tasks, maxConcurrent) {
    this.tasks = tasks;
    this.maxConcurrent = maxConcurrent;
    this.running = 0;
    this.queue = [...tasks];
    this.results = [];
  }
<p>async run() {
const execute = async () => {
while (this.queue.length > 0) {
if (this.running < this.maxConcurrent) {
this.running++;
const task = this.queue.shift();
try {
const result = await task();
this.results.push({ status: 'fulfilled', value: result });
} catch (error) {
this.results.push({ status: 'rejected', error });
} finally {
this.running--;
execute(); // 触发下一个
}
break; // 每次只启动一个任务
}
}
};</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">// 启动初始并发
const starters = Array(Math.min(this.maxConcurrent, this.tasks.length))
                 .fill(0).map(execute);
await Promise.all(starters);
return this.results;

登录后复制

} }

使用方式：

立即学习“Java免费学习笔记（深入）”；

const tasks = [
  () => fetch('/api/1').then(r => r.json()),
  () => fetch('/api/2').then(r => r.json()),
  // 更多任务...
];
<p>new PromisePool(tasks, 3).run().then(console.log);

登录后复制

防抖策略：避免高频重复触发

防抖（Debounce）用于延迟执行函数，直到连续调用停止一段时间后才执行最后一次。适用于搜索框输入、窗口调整等场景。

绘ai

ai绘图提示词免费分享

153

查看详情

核心逻辑：

每次调用时清除之前的定时器
设置新的延迟执行任务
只有最后一次调用会真正执行

基础实现：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
<p>// 使用示例
const search = debounce(query => {
console.log('搜索:', query);
}, 300);</p><p>inputElement.addEventListener('input', e => {
search(e.target.value);
});

登录后复制

结合使用：限流 + 防抖应对复杂场景

某些场景下需要双重控制。例如用户频繁提交异步操作（如上传文件），既要防抖减少触发次数，又要对实际执行的任务进行并发限制。

组合策略：

先用防抖过滤高频触发
将最终触发的任务交由PromisePool执行
确保系统不会因瞬时大量任务而崩溃

const uploadTasks = [/* 上传函数数组 */];
const pool = new PromisePool(uploadTasks, 2);
<p>const triggerUpload = debounce(async () => {
console.log('开始批量上传');
const result = await pool.run();
console.log('上传完成', result);
}, 500);

登录后复制

基本上就这些。合理使用Promise限流和防抖，能显著提升前端应用的健壮性和响应体验。关键是根据业务需求选择合适的策略组合。不复杂但容易忽略细节。

以上就是JavaScript并发控制_Promise限流与防抖策略的详细内容，更多请关注php中文网其它相关文章！