這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中如何實(shí)現(xiàn)并發(fā)控制，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

10年的梅州網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整梅州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“梅州網(wǎng)站設(shè)計”,“梅州網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一、前言

在開發(fā)過程中，有時會遇到需要控制任務(wù)并發(fā)執(zhí)行數(shù)量的需求。

例如一個爬蟲程序，可以通過限制其并發(fā)任務(wù)數(shù)量來降低請求頻率，從而避免由于請求過于頻繁被封禁問題的發(fā)生。

接下來，本文介紹如何實(shí)現(xiàn)一個并發(fā)控制器。

二、示例

const task = timeout => new Promise((resolve) => setTimeout(() => {       resolve(timeout);     }, timeout))       const taskList = [1000, 3000, 200, 1300, 800, 2000];      async function startNoConcurrentControl() {       console.time(NO_CONCURRENT_CONTROL_LOG);       await Promise.all(taskList.map(item => task(item)));      console.timeEnd(NO_CONCURRENT_CONTROL_LOG);     }     startNoConcurrentControl();

上述示例代碼利用 Promise.all 方法模擬6個任務(wù)并發(fā)執(zhí)行的場景，執(zhí)行完所有任務(wù)的總耗時為 3000 毫秒。

下面會采用該示例來驗(yàn)證實(shí)現(xiàn)方法的正確性。

三、實(shí)現(xiàn)

由于任務(wù)并發(fā)執(zhí)行的數(shù)量是有限的，那么就需要一種數(shù)據(jù)結(jié)構(gòu)來管理不斷產(chǎn)生的任務(wù)。

隊(duì)列的**「先進(jìn)先出」特性可以保證任務(wù)并發(fā)執(zhí)行的順序，在 JavaScript 中可以通過「數(shù)組來模擬隊(duì)列」**：

class Queue {        constructor() {          this._queue = [];        }          push(value) {          return this._queue.push(value);        }          shift() {          return this._queue.shift();        }        isEmpty() {          return this._queue.length === 0;       }      }

對于每一個任務(wù)，需要管理其執(zhí)行函數(shù)和參數(shù)：

class DelayedTask {        constructor(resolve, fn, args) {          this.resolve = resolve;          this.fn = fn;          this.args = args;        }      }

接下來實(shí)現(xiàn)核心的 TaskPool 類，該類主要用來控制任務(wù)的執(zhí)行：

class TaskPool {        constructor(size) {          this.size = size;          this.queue = new Queue();       }          addTask(fn, args) {          return new Promise((resolve) => {            this.queue.push(new DelayedTask(resolve, fn, args));          if (this.size) {              this.size--;              const { resolve: taskResole, fn, args } = this.queue.shift();              taskResole(this.runTask(fn, args));            }          })        }        pullTask() {          if (this.queue.isEmpty()) {            return;          }          if (this.size === 0) {            return;          }          this.size++;          const { resolve, fn, args } = this.queue.shift();          resolve(this.runTask(fn, args));        }        runTask(fn, args) {          const result = Promise.resolve(fn(...args));           result.then(() => {           this.size--;            this.pullTask();          }).catch(() => {            this.size--;            this.pullTask();         })           return result;       }      }

TaskPool 包含三個關(guān)鍵方法：

•  addTask: 將新的任務(wù)放入隊(duì)列當(dāng)中，并觸發(fā)任務(wù)池狀態(tài)檢測，如果當(dāng)前任務(wù)池非滿載狀態(tài)，則從隊(duì)列中取出任務(wù)放入任務(wù)池中執(zhí)行。

•  runTask: 執(zhí)行當(dāng)前任務(wù)，任務(wù)執(zhí)行完成之后，更新任務(wù)池狀態(tài)，此時觸發(fā)主動拉取新任務(wù)的機(jī)制。

•  pullTask: 如果當(dāng)前隊(duì)列不為空，且任務(wù)池不滿載，則主動取出隊(duì)列中的任務(wù)執(zhí)行。

接下來，將前面示例的并發(fā)數(shù)控制為2個：

const cc = new ConcurrentControl(2);        async function startConcurrentControl() {        console.time(CONCURRENT_CONTROL_LOG);        await Promise.all(taskList.map(item => cc.addTask(task, [item])))        console.timeEnd(CONCURRENT_CONTROL_LOG);      }        startConcurrentControl();

執(zhí)行流程如下：

最終執(zhí)行任務(wù)的總耗時為 5000 毫秒。

四、高階函數(shù)優(yōu)化參數(shù)傳遞

await Promise.all(taskList.map(item => cc.addTask(task, [item])))

手動傳遞每個任務(wù)的參數(shù)的方式顯得非常繁瑣，這里可以通過**「高階函數(shù)實(shí)現(xiàn)參數(shù)的自動透傳」**：

addTask(fn) {       return (...args) => {          return new Promise((resolve) => {            this.queue.push(new DelayedTask(resolve, fn, args));            if (this.size) {              this.size--;              const { resolve: taskResole, fn: taskFn, args: taskArgs } = this.queue.shift();              taskResole(this.runTask(taskFn, taskArgs));            }          })        }      }

改造之后的代碼顯得簡潔了很多：

await Promise.all(taskList.map(cc.addTask(task)))

五、優(yōu)化出隊(duì)操作

數(shù)組一般都是基于一塊**「連續(xù)內(nèi)存」**來存儲，當(dāng)調(diào)用數(shù)組的 shift 方法時，首先是刪除頭部元素（時間復(fù)雜度 O(1)），然后需要將未刪除元素左移一位（時間復(fù)雜度 O(n)），所以 shift 操作的時間復(fù)雜度為 O(n)。

由于 JavaScript 語言的特性，V8 在實(shí)現(xiàn) JSArray 的時候給出了一種空間和時間權(quán)衡的解決方案，在不同的場景下，JSArray 會在 FixedArray 和 HashTable 兩種模式間切換。

在 hashTable 模式下，shift 操作省去了左移的時間復(fù)雜度，其時間復(fù)雜度可以降低為 O(1)，即使如此，shift 仍然是一個耗時的操作。

在數(shù)組元素比較多且需要頻繁執(zhí)行 shift 操作的場景下，可以通過 「reverse + pop」 的方式優(yōu)化。

const Benchmark = require('benchmark');      const suite = new Benchmark.Suite;        suite.add('shift', function() {        let count = 10;        const arr = generateArray(count);        while (count--) {          arr.shift();        }     })     .add('reverse + pop', function() {        let count = 10;        const arr = generateArray(count);        arr.reverse();        while (count--) {          arr.pop();        }      })      .on('cycle', function(event) {        console.log(String(event.target));      })      .on('complete', function() {        console.log('Fastest is ' + this.filter('fastest').map('name'));        console.log('\n')      })      .run({        async: true      })

通過 benchmark.js 跑出的基準(zhǔn)測試數(shù)據(jù)，可以很容易地看出哪種方式的效率更高：

回顧之前 Queue 類的實(shí)現(xiàn)，由于只有一個數(shù)組來存儲任務(wù)，直接使用 reverse + pop 的方式，必然會影響任務(wù)執(zhí)行的次序。

這里就需要引入雙數(shù)組的設(shè)計，一個數(shù)組負(fù)責(zé)入隊(duì)操作，一個數(shù)組負(fù)責(zé)出隊(duì)操作。

class HighPerformanceQueue {       constructor() {         this.q1 = []; // 用于 push 數(shù)據(jù)         this.q2 = []; // 用于 shift 數(shù)據(jù)       }         push(value) {         return this.q1.push(value);      }       shift() {         let q2 = this.q2;        if (q2.length === 0) {           const q1 = this.q1;           if (q1.length === 0) {             return;           }           this.q1 = q2; // 感謝 @shaonialife 同學(xué)指正           q2 = this.q2 = q1.reverse();         }         return q2.pop();       }       isEmpty() {         if (this.q1.length === 0 && this.q2.length === 0) {         return true;        }         return false;       }     }

最后通過基準(zhǔn)測試來驗(yàn)證優(yōu)化的效果：

關(guān)于JavaScript中如何實(shí)現(xiàn)并發(fā)控制就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：JavaScript中如何實(shí)現(xiàn)并發(fā)控制
鏈接URL：http://jinyejixie.com/article14/johjge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計、定制網(wǎng)站、網(wǎng)站導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)