JavaScript并发控制_javascript多任务处理

JavaScript通过事件循环实现异步任务并发控制,使用concurrentControl函数限制最大并发数,避免资源耗尽;该函数利用Promise和索引追踪任务执行,确保最多同时运行指定数量的任务,完成后汇总结果,适用于批量请求、文件上传等场景,提升应用稳定性。

javascript并发控制_javascript多任务处理

JavaScript 是单线程语言,但通过事件循环和异步机制实现了看似“并发”的多任务处理。虽然不能像多线程语言那样真正并行执行代码,但可以通过合理的方式控制异步任务的并发数量,避免资源耗尽或接口请求过多导致的问题。

为什么需要并发控制

在实际开发中,可能会遇到以下场景:

批量上传大量文件,同时发起所有请求会占用过多带宽或触发浏览器限制 爬取多个网页数据,需限制同时进行的请求数量 处理大量异步任务,防止主线程阻塞或内存溢出

如果不加控制,一次性启动成百上千个 Promise,可能导致系统资源紧张甚至崩溃。因此,需要一种机制来限制同时执行的任务数,这就是并发控制的核心目标。

实现一个简单的并发控制器

我们可以封装一个函数,接收任务列表和最大并发数,在不超过限制的前提下按顺序执行任务。

立即学习“Java免费学习笔记(深入)”;

function concurrentControl(tasks, maxConcurrent) {
  return new Promise((resolve) => {
    let index = 0;
    let completed = 0;
    let result = [];

    if (tasks.length === 0) return resolve(result);

    function runTask() {
      if (index >= tasks.length) return;

      const currentIndex = index++;
      const taskPromise = tasks[currentIndex]();

      taskPromise.then(res => {
        result[currentIndex] = res;
        completed++;
        if (completed === tasks.length) {
          resolve(result);
        } else {
          runTask();
        }
      }).catch(err => {
        console.error(‘Task failed:’, err);
      });
    }

    for (let i = 0; i       runTask();
    }
  });
}

使用方式:

const sleep = (time) => () => new Promise(r => setTimeout(r, time));
const tasks = [
  sleep(1000),
  sleep(500),
  sleep(800),
  sleep(300)
];

concurrentControl(tasks, 2).then(() => console.log(‘All done’));

上述代码保证最多同时运行两个任务,当前任务完成后才会拉起下一个待执行任务。

结合 async/await 简化逻辑

利用 async 函数可以让控制流更清晰。以下是改写版本:

async function concurrentControl(tasks, maxConcurrent) {
  const results = [];
  let index = 0;

  async function worker() {
    while (index       const i = index++;
      try {
        const result = await tasks[i]();
        results[i] = result;
      } catch (err) {
        results[i] = err;
      }
    }
  }

  const workers = Array.from({ length: maxConcurrent }, () => worker());
  await Promise.all(workers);
  return results;
}

这个版本使用了多个“工作线程”(其实是协程)去消费任务队列,结构更简洁且易于理解。

实际应用场景举例

比如从多个 URL 获取数据:

const urls = [
  ‘https://api.example.com/data1’,
  ‘https://api.example.com/data2’,
  ‘https://api.example.com/data3’
];

const tasks = urls.map(url => () => fetch(url).then(r => r.json()));

concurrentControl(tasks, 3).then(results => {
  console.log(‘所有响应:’, results);
});

这样可以确保最多只有 3 个请求同时发出,既高效又安全。

基本上就这些。不复杂但容易忽略细节。掌握并发控制对构建健壮的异步应用很有帮助。

以上就是JavaScript并发控制_javascript多任务处理的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1541127.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 13:03:24
下一篇 2025年12月21日 13:03:35

相关推荐

  • JavaScript响应式_javascript数据绑定

    JavaScript通过监听数据变化实现响应式,核心是自动更新视图。2. Vue 2用Object.defineProperty拦截属性的get/set,实现依赖追踪和视图更新。3. Vue 3采用Proxy代理整个对象,支持数组和动态属性,更强大灵活。4. 双向绑定结合输入事件与响应式监听,实现数…

    2025年12月21日
    000
  • JavaScript模块化开发_JavaScript工程化实践

    JavaScript模块化通过ES6的import和export实现代码拆分与复用,解决早期命名冲突问题;结合Webpack、Vite等工具提升构建效率,支持Tree-shaking和按需加载,增强可维护性与性能优化。 JavaScript模块化开发是现代前端工程中的核心实践之一。随着项目规模扩大,…

    2025年12月21日
    000
  • JavaScript视频控制_javascript播放器

    首先通过HTML5 video标签和JavaScript实现视频播放控制,具体包括:1. 使用play()和pause()方法实现播放暂停;2. 通过currentTime属性同步进度条并支持拖动跳转;3. 利用volume属性调节音量;4. 调用Fullscreen API实现全屏功能,需由用户点…

    2025年12月21日
    000
  • JavaScript变量提升解析_javascript作用域

    变量提升本质是声明在编译阶段被收集到作用域顶部,赋值保留在原地。var和function声明会被提升,其中函数优先级高于变量;let和const存在暂时性死区,声明前访问会报错;函数表达式仅变量名提升,初始化为undefined;块级作用域中let/const不暴露提升行为。应避免依赖提升,推荐先声…

    2025年12月21日
    000
  • javascript_浏览器渲染原理

    JavaScript通过阻塞DOM解析、影响渲染树构建及触发重排重绘来干扰浏览器关键渲染路径。1. 脚本默认阻塞HTML解析;2. 访问布局属性引发强制同步布局;3. 长任务导致主线程卡顿。优化方式包括:使用async/defer异步加载脚本;拆分长任务;批量DOM操作;利用requestAnima…

    2025年12月21日
    000
  • 代码覆盖率统计_使用Istanbul测量测试完整性

    Istanbul(nyc)是JavaScript代码覆盖率工具,通过静态分析和插桩测量语句、函数、分支和行的执行情况;支持多种报告格式,可配置阈值用于CI,结合Mocha等框架生成HTML报告,绿色为已覆盖、红色为未执行、黄色为部分覆盖,帮助定位测试盲区,提升代码质量。 在编写单元测试或集成测试时,…

    2025年12月21日
    000
  • JavaScript中如何创建对象_构造函数和字面量的区别

    JavaScript创建对象最常用构造函数和字面量:字面量适合一次性简单对象,语法简洁但方法不共享;构造函数支持批量实例化、原型继承与方法复用,适用于多对象场景。 JavaScript中创建对象最常用的是构造函数和字面量两种方式,核心区别在于:字面量更简洁、适合一次性简单对象;构造函数更适合批量创建…

    2025年12月21日
    000
  • JavaScript中什么是作用域链_变量如何查找

    作用域链是JavaScript中变量查找的机制,基于函数定义时的词法位置形成,由当前词法环境及其外层引用逐级构成,用于从内到外查找变量直至全局,未找到则报ReferenceError。 作用域链是 JavaScript 中变量查找的机制,它决定了当前执行上下文能访问哪些变量。简单说,当代码中引用一个…

    2025年12月21日
    000
  • JavaScript算法实现_javascript编程挑战

    数组去重:利用Set特性去除重复元素,return […new Set(arr)];2. 回文判断:转小写后与反转字符串比较,cleaned === cleaned.split(”).reverse().join(”);3. 快速排序:选基准值分治递归,left、…

    2025年12月21日
    000
  • javascript_如何实现缓存机制

    使用缓存可提升JavaScript性能,避免重复计算或请求。1. 用Map或对象实现基础缓存,如斐波那契数列记忆化;2. 封装memoize函数,自动缓存可序列化参数的调用结果;3. 浏览器中可用localStorage持久化缓存,WeakMap避免内存泄漏,Service Worker结合Cach…

    2025年12月21日
    000
  • JavaScript内存泄漏_javascript问题排查

    JavaScript内存泄漏指分配的内存未被释放,导致页面卡顿或崩溃,常见类型包括意外的全局变量、未清理的定时器、未解绑事件监听、闭包引用过大对象及DOM节点残留引用;可通过Chrome DevTools的Memory面板拍堆快照、Performance面板监控内存曲线等方式排查;预防措施包括避免全…

    2025年12月21日
    000
  • JavaScript中什么是副作用_如何避免副作用

    副作用是函数执行时除返回值外对外部状态的可观察改变,如修改全局变量、DOM、发起网络请求等;纯函数需满足相同输入恒得相同输出且无任何副作用,应通过参数传入依赖、使用不可变操作等方式实现。 副作用是指函数在执行过程中,除了返回值之外,还对外部状态产生了可观察的改变。比如修改了全局变量、改变了传入对象的…

    2025年12月21日
    000
  • JavaScript:将对象内嵌套数组合并并格式化为新数组的实用指南

    本文将详细介绍如何在javascript中处理包含嵌套数组的对象数据结构。我们将探讨一种高效的方法,通过迭代并结合对象内部的并行数组元素,将其转换为一个全新的、格式化后的字符串数组,例如将 `names` 和 `length` 数组合并为 `[‘name (length)’]…

    2025年12月21日
    000
  • JavaScript中FileReader API:正确读取本地文件内容的教程

    本教程详细介绍了如何使用javascript的`filereader` api从html文件输入元素中读取本地文件内容。文章重点阐述了`filereader`的异步特性,并指导开发者如何通过监听`load`事件来正确获取文件数据,避免常见的`undefined`错误。通过提供清晰的示例代码和注意事项…

    2025年12月21日
    000
  • JSON Schema条件验证:理解if/then/else的正确作用域

    本教程深入探讨JSON Schema中`if/then/else`条件验证的正确使用方法,特别是当需要根据一个属性的值来动态验证另一个对象属性的键模式时。文章将阐明常见的验证作用域混淆问题,并提供一个结构清晰、逻辑严谨的解决方案,确保条件逻辑按预期工作,实现灵活且强大的数据验证。 在JSON Sch…

    2025年12月21日
    000
  • React组件Props类型推断:TypeScript泛型与映射类型实践

    本文深入探讨如何在react组件中利用typescript的泛型、映射类型和工具类型,实现对组件props的严格类型推断与控制。通过一个表格组件的实例,详细讲解如何确保`columns`、`columnorder`和`cellrenderer`等属性的键名严格来源于`rows`数据类型,从而大幅提升…

    2025年12月21日
    000
  • Google Cloud Functions 时区配置:限制与处理策略

    google cloud functions 运行时环境默认采用协调世界时(utc),且不支持全局配置服务器实例的时区。这意味着开发者无法直接更改函数运行时的默认时区。为了处理不同时区的日期和时间,应用程序必须在代码逻辑层面进行显式管理和转换,通常建议内部使用 utc,并在需要时转换为目标时区。 C…

    2025年12月21日
    000
  • marked.js自定义图片渲染与路径前缀处理教程

    本教程详细介绍了如何使用`marked.js`处理非标准markdown图片语法(如`![[filename]]`)。通过预处理将自定义语法转换为`marked.js`可识别的标准格式,并利用其`renderer`选项自定义图片渲染逻辑,实现自动为图片url添加`images/`前缀,最终生成符合要…

    好文分享 2025年12月21日
    000
  • 深入理解 Fetch API 响应处理:从 Blob 到文本的正确姿势

    本教程旨在解决使用 javascript `fetch api` 从服务器获取数据时常见的响应解析问题,特别是当预期为纯文本但实际获取到 `blob` 对象的情况。文章将详细阐述 `fetch api` 响应对象的处理机制,包括 `response.text()`、`response.json()`…

    2025年12月21日
    000
  • React Navigation中跨屏幕传递参数的最佳实践

    本文深入探讨了在React Native应用中使用React Navigation进行屏幕间参数传递的常见问题及其解决方案。重点分析了当传递对象参数时,如何在目标屏幕正确解构和访问这些参数,特别是当参数被嵌套在另一个对象中时。通过示例代码,我们展示了从抽屉导航组件向详情页传递随机食谱、分类和标题数据…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信