快捷導(dǎo)航

詳解JavaScript如何控制并發(fā)請求數(shù)量

更新時間：2024年01月15日 09:38:10 作者：gnip

某些情況下,我們可能需要對需要執(zhí)行的多個異步任務(wù)進(jìn)行異步數(shù)量控制,只允許固定數(shù)量的任務(wù)執(zhí)行,本文為大家整理了JS控制并發(fā)請求數(shù)量的相關(guān)代碼,希望對大家有所幫助

概述

某些情況下，我們可能需要對需要執(zhí)行的多個異步任務(wù)進(jìn)行異步數(shù)量控制，只允許固定數(shù)量的任務(wù)執(zhí)行，等待其中某些任務(wù)完成后，繼續(xù)追加異步任務(wù)，直到將緩沖隊(duì)列填滿，最后執(zhí)行完畢再停止。

代碼

class BufferControl {
  bufferList = []; //緩沖隊(duì)列
  maxLen = 1; //當(dāng)前允許執(zhí)行的最大并發(fā)數(shù)量
  currentQueenCount = 0; //當(dāng)前正在執(zhí)行的任務(wù)數(shù)量
  add(fn) {
    this.bufferList.push(fn);
    this.run();
  }

  run() {
    if (!this.bufferList.length) {
      return;
    }
    while (this.bufferList.length && this.currentQueenCount < this.maxLen) {
      let fn = this.bufferList.shift();
      this.currentQueenCount++;
      fn().then(() => {
        this.currentQueenCount--;
        this.run();
      });
    }
  }
}

let queen = new BufferControl();

// 定義幾個異步任務(wù)
let fn1 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('fn1', 1000);
      resolve();
    }, 1000);
  });
};
let fn2 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('fn2', 2000);
      resolve();
    }, 1000);
  });
};
let fn3 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('fn3', 3000);
      resolve();
    }, 1000);
  });
};
let fn4 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('fn4', 4000);
      resolve();
    }, 1000);
  });
};
// 追加到緩沖隊(duì)列中
queen.add(fn1);
queen.add(fn2);
queen.add(fn3);
queen.add(fn4);

效果

最后的效果為每隔1秒打印一次異步任務(wù)的結(jié)果，4秒后執(zhí)行完畢全部異步任務(wù)。

如果我們吧屬性maxLen改為2，則會共計(jì)耗時2秒完成打印，每秒分別打印兩次任務(wù)。

總結(jié)

當(dāng)然，異步任務(wù)的個數(shù)和時間都不定，我們可以根據(jù)自己的需求，自行設(shè)置，最重要還是對Promise的深入理解.

到此這篇關(guān)于詳解JavaScript如何控制并發(fā)請求數(shù)量的文章就介紹到這了,更多相關(guān)JavaScript控制并發(fā)請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

微信小程序賬號密碼登入和傳值的實(shí)現(xiàn)方法
傳統(tǒng)的web開發(fā)實(shí)現(xiàn)登陸功能,一般的做法是輸入賬號密碼、或者輸入手機(jī)號及短信驗(yàn)證碼進(jìn)行登錄,下面這篇文章主要給大家介紹了關(guān)于微信小程序賬號密碼登入和傳值的實(shí)現(xiàn)方法,需要的朋友可以參考下
2022-04-04
如何用JS/HTML將時間戳轉(zhuǎn)換為“xx天前”的形式
如果我們有一份過去時間戳，如何使用JS/HTML將時間戳轉(zhuǎn)換為“xx天前”的形式呢？很多朋友都覺得解決辦法有點(diǎn)困難，其實(shí)很簡單的，下面小編給大家分享完整的實(shí)現(xiàn)代碼，一起看看吧
2017-02-02
關(guān)于JS中的undefined與null詳解
在JavaScript中，undefined和null是兩個特殊的值，用于表示缺失或空值，文章通過代碼示例詳細(xì)介紹undefined與null作用及使用方法，感興趣的同學(xué)可以借鑒一下
2023-05-05
微信小程序?qū)崿F(xiàn)客服功能(客服消息)的全過程
在最近做的微信小程序中需要實(shí)現(xiàn)一個自帶的客服功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)客服功能(客服消息)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
JavaScript對象詳解之對象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對象詳解之js對象屬性的添加的相關(guān)資料,在JavaScript中對象是通過鍵值對來存儲數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過直接給對象添加屬性的方式來增加對象的屬性,需要的朋友可以參考下
2023-07-07
javascript之典型高階函數(shù)應(yīng)用介紹二
在前一篇文章javascript之典型高階函數(shù)中主要實(shí)現(xiàn)了幾個典型的functional函數(shù),文章最后也提出了疑問，為啥那樣的實(shí)現(xiàn)與F#之類的函數(shù)式語言“不太一樣”呢？今天來試試更“函數(shù)式”的實(shí)現(xiàn)
2013-01-01
javascript實(shí)現(xiàn)拖動元素交換位置
這篇文章主要介紹了javascript實(shí)現(xiàn)拖動元素交換位置的方法，類似拼圖游戲拖拽卡片效果，感興趣的小伙伴們可以參考一下
2015-11-11
webpack實(shí)現(xiàn)熱更新（實(shí)施同步刷新）
本篇文章主要介紹了webpack實(shí)現(xiàn)熱更新（實(shí)施同步刷新），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
JavaScript實(shí)現(xiàn)修改偽類樣式
這篇文章主要介紹了JavaScript實(shí)現(xiàn)修改偽類樣式的方法以及代碼實(shí)現(xiàn)過程，一起學(xué)習(xí)參考下吧。
2017-11-11
基于JavaScript實(shí)現(xiàn)瀏覽器添加收藏功能
今天搞項(xiàng)目的時候?yàn)榱藢?shí)現(xiàn)瀏覽者實(shí)現(xiàn)添加收藏的功能，特地了解了一下相關(guān)的API，整理了一段代碼幫助大家實(shí)現(xiàn)瀏覽器添加收藏功能，感興趣的朋友跟隨小編一起看看吧
2023-02-02