演示地址https---codepen.io-firstblood上如何控制1000个Echarts实例渲染最大并发

时间：2023-03-26 22:50:09 JavaScript

.chart{float:left;瀹藉害锛氬儚绱?楂樺害锛?00px锛涜竟璺濓細10px锛沚order:2pxsolid#ff9900;}婕旂ず鍦板潃鍏?..椤圭洰鑳屾櫙闅忕潃闈㈠悜棰嗗鐨勭紪绋嬭秺鏉ヨ秺娴佽锛岀湅鏉块」鐩繀椤绘槸姣忎釜鍓嶇寮€鍙戦珮鎵嬬殑蹇呭鍝佷骇鍝佺粡鐞嗗紶涓夎鍓嶇寮€鍙戦珮鎵嬬孩鐩惧仛涓€涓畾鏈熷埛鏂扮殑1000寮犲叕鍙告渶鏂拌储鍔℃敮鍑虹殑鍥捐〃銆傞」鐩畬鎴愪氦浠樼粰浜у搧缁忕悊寮犱笁銆傛病鏈夊苟鍙戞帶鍒讹紝鎴戜滑鐪嬬湅姝ゆ椂绾㈢浘鐨勪唬鐮佸ぇ姒傛儏鍐点€?template>

.chart{float:left;瀹藉害锛氬儚绱?楂樺害锛?00px锛涜竟璺濓細10px锛沚order:2pxsolid#ff9900;}缁撴灉寮犱笁涓嶆寜濂楄矾鎵撶墝锛屽伔鍋峰湪鐢佃涓婅浜嗕釜娴忚鍣紙鎬ц兘寰堝樊锛夛紝鐒跺悗杈撳叆鍦板潃xxx.com锛堣嚜鑴戣ˉ锛夆€︹€︾洿鎺ヨ娴忚鍣ㄥ穿婧冧簡鈥︹€︽病閿欙紝姝ゅ埢绾㈢浘鐨勫績閲岋紝鎯冲埌浜嗗悗绔ぇ浣€侀粍锛岀粰浜嗕粬涓€涓剰蹇垫帶鍒禖oncurrencyImplementationControlConcurrencyImplementationConcurrencyFirst锛屾垜浠潵瀹炵幇涓€涓苟鍙戞帶鍒跺姛鑳姐€傛兂鐩存帴鍏ラ鐨勫悓瀛﹀彲浠ヨ烦鍒板畬鏁翠唬鐮佹煡鐪?***@params{Number}poolLimit-鏈€澶у苟鍙戞暟闄愬埗*@params{Array}array-鎵€鏈夊苟鍙戣姹倈娓叉煋鏁扮粍*@params{Function}iteratorFn-鎵ц瀵瑰簲鐨勫苟鍙戝嚱鏁帮紙鎺ュ彈鏁扮粍鐨勬瘡涓€椤瑰€硷級*/asyncfunctionasyncPool(poolLimit,array,iteratorFn){constret=[]//allExecutingpromisesletexecuting=[]//Executingpromisesfor(constitemofarray){//鎺ュ彈iteratorFn鐨勮繑鍥炲€硷細Promiseconstp=Promise.resolve().then(()=>iteratorFn(item))ret.push(p)//濡傛灉鎵цarray澶т簬绛変簬鏈€澶у苟鍙戦檺鍒讹紝閭ｄ箞鎴戜滑闇€瑕佹帶鍒跺苟鍙慽f(array.length>=poolLimit){conste=p.then(()=>executing.splice(executing.indexOf(e),1))//p杩斿洖鐨勪竴涓狿romise锛岀劧鍚庢垜浠妸瀹冩斁鍒癳xecuting鏁扮粍涓紝鎵ц瀹屽氨鍘绘帀瀵瑰簲鐨勫€糴xecuting.push(e)//Corecode:beingexecuted宸叉墽琛岀殑promises鏁扮粍澶т簬鎴栫瓑浜庘€滄渶澶у苟鍙戦檺鍒垛€濄€備娇鐢?race鏂规硶閲婃斁鎵ц閫熷害鏈€蹇殑if(executing.length>=poolLimit)awaitPromise.race(executing)}}//杩斿洖涓€涓狿romise.allreturnPromise.all(ret)}TransformrenderChartListfunction(core)asyncrenderChartList(){//杩欓噷MAX_CURRENT鍙互鑷姩瀹氫箟anumberawaitasyncPool(MAX_CURRENT,this.domList,(dom)=>{//杩欓噷鎴戜滑蹇呴』杩斿洖涓€涓搴斾簬`concurrentfunction`鐨刞p`鍙橀噺鐨刾romisereturnnewPromise(async(resolve)=>{constres=awaitthis.initChart(dom);resolve(res);//杩欎竴姝ヤ箣鍚庯紝瀵瑰簲鎵ц`concurrentfunction`鐨刾.then琚墧闄).then((data)=>{console.log(data);returndata;});});}3.瀵筰nitChart鍑芥暟杩涜鏀归€狅紝蹇呴』淇濊瘉涓€涓浘琛ㄦ覆鏌撳畬鎴愬悗锛屽啀杩涜涓嬩竴娆℃覆鏌撱€傝繖涓椂鍊欐垜浠渶瑕佺洃鍚珽charts鐨刦inished浜嬩欢initChart(domId){//鎴戜滑鏀归€犲畠鍒涘缓涓€涓猵romise鍑芥暟returnnewPromise((resolve)=>{...//鏍稿績浠ｇ爜鐩戝惉finishedofechartsthis.chartObjs[domId].on("finished",()=>{resolve(domId);//瀵瑰簲`constres=awaitthis.initChart(dom);`});});}4.鏀归€爄ntervalChartData鍑芥暟锛屽繀椤讳繚璇佹墍鏈夊浘琛ㄦ覆鏌撳苟鍙戞墽琛岋紝鐒跺悗杩涘叆涓嬩竴涓畾鏃跺櫒閫昏緫锛屽垽鏂墽琛岄暱搴︽槸鍚﹁冻澶燂紙姝ゆ椂鎵ц搴旇浣滀负鍏ㄥ眬鍙橀噺鐙珛鎵ц锛塱ntervalChartData(s){璁剧疆闂撮殧(()=>{if(executing.length>0)return;//娌℃湁閲嶅this.renderChartList();},s);}瀹屾暣浠ｇ爜闄勪笂瀹屾暣浠ｇ爜.chart{鍚戝乏椋樻诞;瀹藉害锛氬儚绱狅紱楂樺害锛?00px锛涜竟璺濓細10px锛沚order:2pxsolid#ff9900;}灏忓僵铔嬪皬褰╄泲鉁岋笍锛岀孩鐩惧姖寮犱笁涔伴珮鎬ц兘鐢佃鐨勫畬缇庤В鍐虫柟妗堛€傘€傘€傚鏈変笉濡ユ杩庢寚姝ｐ煂熷鏈夊彂鐜版湁甯姪锛屾杩庤浆鍙戰煂?/p>