今回はJSでタイムシェアリング関数を最適化する方法を紹介します。 JSでタイムシェアリング関数を最適化する際の注意点を実際のケースで見てみましょう。
関数スロットルの原理は、現在の関数の実行を遅らせることです。遅延が完了していない場合、関数に対する次のリクエストは無視されます。これは、多くの関数リクエストが無視されることを意味します。
一部の開発シナリオでは、一度に数千のノードをドキュメントに挿入することがあります。短期間に大量の DOM ノードをブラウザに追加すると、ブラウザに負荷がかかり、結果として遅延が発生したり、遅延が発生したりすることがあります。ブラウザの不具合に耐えられない場合、解決策の 1 つはタイムシェアリング機能 (timeChunk) を使用することです。
timeChunk タイムシェアリング機能を使用すると、ノードの作成をバッチで行うことができます。たとえば、1 秒間に 1000 個のノードが作成される場合、200ms ごとに 10 個のノードが作成されます。特定の timeChunk 関数は次のようにカプセル化されています:
function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量 var obj, t; var start = function(){ var len = Math.min(count||1,arr.length); for(var i=0; i < len; i++){ obj = arr.shift(); fn(obj) } }; return function(interval){ t = setInterval(function(){ if(arr.length==0){ return clearInterval(t) }; start(); },interval||200) } }
アプリケーション:
ドキュメントに 1000 個のノードを追加したい場合、timeChunk タイムシェアリング関数を使用して、200 ミリ秒ごとに 20 個のノードを継続的に追加できます。
var arr = []; for(var i = 1; i <= 1000; i++){ arr.push(i) } var renderLists = timeChunk(arr,function(i){ var p = document.createElement('p'); p.innerHTML = i; document.body.appendChild(p); },20); renderLists(200);
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
vue がパラメータを渡す環境に従ってさまざまなドメイン名をパッケージ化する方法の詳細な説明
Vue が HTML 文字列を HTML に変換する手順の詳細な説明
以上がJS でタイムシェアリング関数を最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。