ファンクションスロットリング機能とタイムシェアリング機能を使用する手順の詳細な説明

今回は、関数スロットルとタイムシェアリング機能を使用する手順について詳しく説明します。関数スロットルとタイムシェアリング機能を使用する際の注意点は何ですか?以下は実際のケースです。

タイムシェアリング機能と機能スロットルの問題は異なります。前述したように、機能スロットルの対象となるイベントはユーザーによって積極的に呼び出されません。

関数スロットルの原理は、現在の関数の実行を遅らせることです。遅延が完了していない場合、関数に対する次のリクエストは無視されます。これは、多くの関数リクエストが無視されることを意味します。

一部の開発シナリオでは、短期間に多数の 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 サイトの他の関連記事に注目してください。

推奨読書:

Angularサーバーサイドレンダリングメソッドの概要

HTML文字列をHTMLタグに変換して使用します

以上がファンクションスロットリング機能とタイムシェアリング機能を使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。