JavaScript第24編高級タイマー(以下)

行列ブロック
配列ブロックとは、あるサイクルが大量の時間を占有していることを発見したとき、同時に上記の二つの問題に対して、あなたの答えはすべて「いいえ」であるとしたら、タイマーを使ってこのサイクルを分割することができます.
考えはタイマーに合わせて再帰的にタイマーを呼び出すことです.
基本例は以下の通りです

setTimeout(function(){
     //          
     var item = array.shift();
     process(item);
     //     ，         
     if(array.length > 0){
        setTimeout(arguments.callee, 100);
     }
}, 100);

パッケージ作成関数は以下の通りです.

function chunk(array, process, context){
     setTimeout(function(){
         var item = array.shift();
         process.call(context, item);
         if (array.length > 0){
             setTimeout(arguments.callee, 100);
         }
     }, 100);
} 

chunk()メソッドは、3つのパラメータを受け入れる.処理する項目の配列、アイテムの関数を処理するためのもの、および関数を実行するための任意の環境.関数内部では、前に述べた基本モードを用いて、コール()で呼び出されたプロcess関数により、適切な実行環境を設定することができます.タイマーの時間間隔は100 msに設定されており、JavaScriptプロセスが処理項目のイベント間にアイドル状態に移行する時間がある.あなたの必要に応じてこの間隔の大きさを変更することができますが、100 msはほとんどの場合に効果があります.この関数は以下のように使用できます.

var data = [12,123,1234,453,436,23,23,5,4123,45,346,5634,2234,345,342];
function printValue(item){
 var div = document.getElementById("myDiv");
 div.innerHTML += item + "
";
}
chunk(data, printValue);

どんなシーンで使いますか
行列ブロックは一般的にどのようなシーンに使われますか?一般的には時間がかかりますが、シナリオが長時間作動してブラウザが崩壊するのを防ぐために使用されます.
もう一つの方法があります.配列は8を基数とし、0-8を一組とし、9-16を一つのグループとして、これを類推して循環します.ここの中の8つは順次呼び出します.外の大きな塊を循環させるだけで、最適化もできます.
関数の流れ
関数の流れは何ですか?
いくつかのコードは、中断なしに連続して繰り返し実行してはいけません.最初に関数を呼び出して、タイマーを作成し、指定された時間間隔の後にコードを実行します.この関数を2回目に呼び出すと、前回のタイマーをクリアして他の設定を行います.前のタイマーがすでに実行されていたら、この操作は何の意味もありません.しかし、前のタイマーがまだ実行されていない場合、新しいタイマーに置き換えられます.目的は、実行関数の要求が一時停止された後にのみ実行されます.
関数の流れの基本パターンは以下の通りです.

var processor = {
     timeoutId: null,
     //         
     performProcessing: function(){
        //       
     },
     //         
     process: function(){
         clearTimeout(this.timeoutId);
         var that = this;
         this.timeoutId = setTimeout(function(){
            that.performProcessing();
         }, 100);
     }
};
//      
processor.process();

簡略化後:

function throttle(method, context) {
     clearTimeout(method.tId);
     method.tId= setTimeout(function(){
        method.call(context);
     }, 100);
} 

関数の流れの役割は、高い周波数で関数を呼び出さなければならない時に、最後にトリガを停止した後に一回の関数を呼び出して、操作コストを節約して、性能を最適化することができます.
イベントをカスタマイズ
事件は何ですか?
イベントは観察者と呼ばれる設計モードであり、これは緩い結合コードを作る技術である.オブジェクトは、オブジェクトのライフサイクルの中で、ある興味深い時刻を表すイベントをリリースすることができます.そして他のオブジェクトは、これらの興味深い瞬間が来るのを待って、コードを実行して応答するオブジェクトを観察することができる.
観察者モード:
観察者モードは2種類のオブジェクトから構成されます.主体と観察者です.主体は事件の発表を担当し、同時に観察者はこれらのイベントを購読して主体を観察する.このモードの一つのキーコンセプトは、主体が観察者のどんなことを知らないということです.つまり、観察者がいなくても、単独で存在し、正常に動作することができます.一方、観察者は、主体を知り、イベントのコールバック関数(イベントハンドラ)を登録することができる.DOMに関わる時、DOM元素は主体で、あなたの事件の処理コードは観察者です.
イベントはDOMと対話する最も一般的な方法であるが、それらはまた、非DOMコードにおいても使用されうる.カスタマイズされたイベントを実現することによって.カスタムイベントの背後にある概念は、イベントを管理する対象を作成し、他のオブジェクトにイベントを傍受させることです.この機能を実現するための基本パターンは以下のように定義されています.

function EventTarget(){
    this.handlers = {};
}
EventTarget.prototype = {
     constructor: EventTarget,
     addHandler: function(type, handler){
         if (typeof this.handlers[type] == "undefined"){
            this.handlers[type] = [];
         }
         this.handlers[type].push(handler);
     },
     fire: function(event){
         if (!event.target){
            event.target = this;
         }
         if (this.handlers[event.type] instanceof Array){
             var handlers = this.handlers[event.type];
             for (var i=0, len=handlers.length; i < len; i++){
                handlers[i](event);
             }
         }
     },
     removeHandler: function(type, handler){
         if (this.handlers[type] instanceof Array){
             var handlers = this.handlers[type];
             for (var i=0, len=handlers.length; i < len; i++){
                 if (handlers[i] === handler){
                     break;
                 }
             }
             handlers.splice(i, 1); 
         }
     }
};

EventTargetタイプは、イベントハンドラを保存するための単独の属性handlesがあります.また、与えられたタイプのイベントを登録するためのaddHandler()の3つの方法がある.fire()は、イベントをトリガするために使用されます.removeHandler()は、あるイベントタイプのイベントハンドラをオフにします.
addHandler()法は二つのパラメータを受け入れる.イベントタイプとこのイベントを処理するための関数.この方法を呼び出すと、ハンドル属性の中にはすでにこのイベントのタイプに対する配列が存在しているかどうかを確認します.ない場合は、新しいものを作成します.その後、Push()を使用して、この処理プログラムを配列の最後に追加します.
イベントを起動する場合は、fire関数を呼び出します.この方法は、個々のパラメータを許容し、少なくともtype属性を含むオブジェクトです.ファイアー()メソッドは、まず、オブジェクトにターゲット属性を設定します.もし指定されていないならば.その後、イベントタイプに対応する一連の処理プログラムを検索し、各関数を呼び出し、イベントオブジェクトを与える.これらはすべてカスタムイベントですので、イベントの対象に必要な追加情報は自分で決めます.
removeHandler()方法はaddHandler()の補助であり、それらが受けるパラメータは同じである.イベントの種類とイベントハンドラ.この方法は、イベントハンドラの配列を検索して、削除する処理プログラムの位置を見つけます.見つけたらbreakオペレータを使ってforサイクルを終了します.その後、splice()法を使って、この項目を配列から削除します.
EventTargetタイプのカスタムイベントを使用すると、以下のように使用できます.

function handleMessage(event){
 alert("Message received: " + event.message);
}
//       
var target = new EventTarget();
//          
target.addHandler("message", handleMessage);
//    
target.fire({ type: "message", message: "Hello world!"});
//        
target.removeHandler("message", handleMessage);
//  ，       
target.fire({ type: "message", message: "Hello world!"});