コアデコレータ源の分析--debounce

@debounce

手ぶれ補正機能：関数n秒を呼び出すと、アクションが一度に実行され、実行時間前に順番にn秒が呼び出した場合、関数がキャンセルされることを再計算。

ユースケース

インポート {デバウンス} から 「コア-デコレータ」。

クラス   {

  コンテンツ= '' ;

  @debounce（500）
  updateContent（コンテンツ）{ この .content =コンテンツ。  }
    


  bindEvent（）{ 文書 .getElementById（'エディタ'）.oninput = E => { この .updateContent（e.target.value）    }   } }

1	< TEXTAREAの ID = "エディタ" > </ TEXTAREA >

idは編集エディタ入力されたリスニング場合、例えば、各エントリがトリガするoninput呼び出し、イベントをthis.updateContent方法。することができ、頻繁なコンテンツ更新を防止するために、updateContent入力時に更新しない、デバウンス方法を装飾this.content、入力が再度500ミリ秒、一回のコンテンツの更新内容が終了するまで。

ソース

インポート {metaFor} から 」./private/utils'。

CONST DEFAULT_TIMEOUT = 300。

関数 handleDescriptor（ターゲット、キー、記述、[待つ= DEFAULT_TIMEOUT、即時= FALSE] ） { CONSTコールバック= descriptor.value。
  

  場合（typeof演算！==コールバック「関数」）{ スロー新にSyntaxErrorを（「関数のみをデバウンスすることができます」）;   }
      


  リターン { 
    ...記述子、
    値（）{ CONST {} = debounceTimeoutIds metaFor（この）; //従来の画像安定化機能は、呼び出しCONST debounceTimeoutIds [キー] =タイムアウト; //即時タイムアウトが真と現在の主題ではありません、時間は最初の呼び出しを実行するときにのみ呼び出すときのconst =タイムアウト;! CALLNOW負荷即時&&をconstの引数=の引数。
      
      
      
      
      
      
      

      clearTimeout（タイムアウト）; //は常にカバーされ、以前の手ぶれ補正機能、コールバック関数が渡されたの最後の実行       debounceTimeoutIdsを[キー]のsetTimeout（= （） => { 削除 [キー] debounceTimeoutIdsを、IF（即時）{！          コールバック.apply（これは、引数）;         }       }、待機）;
      

        
        




      IF（CALLNOW）{ //実行する前に待機
         （callback.apply この、引数）; 
      } 
    } 
  }; 
}

コールのパラメータ

着信コールをサポートしている場合、待機とoptions.immediate二つのパラメータ：

待つ：時間を実行ユニットミリ秒、デフォルト値300を待っています
{即時}：結合機能を実行するかどうか、デフォルト値は、実行待ちの前に時間を待って、falseです。trueに渡される最初のパラメータを行いました

メタオブジェクト

1 
2 
3

CONST {} = debounceTimeoutIds metaFor（この）; 
//この時間が原因lazyInitializeと、のみdebounceTimeoutIdsああ初期化される
コンソールの.log（metaFor（本））

metaFor現在のインスタンスの増加する方法Symbol('__core_decorators__')、属性、値メタオブジェクト。
デバウンス及びスロットルを用いる属性を含む、以下に示すように、メタタイプ：

class Meta {
  @lazyInitialize
  debounceTimeoutIds = {};

  @lazyInitialize
  throttleTimeoutIds = {};

  @lazyInitialize
  throttlePreviousTimestamps = {};

  @lazyInitialize
  throttleTrailingArgs = null;

  @lazyInitialize
  profileLastRan = null;
}

使用了@lazyInitialize标记，可以使得每次只初始化被用到的属性，像debounce的时候只用到debounceTimeoutIds属性。console输出Meta对象，结构如图所示，可以看到只初始化了debounceTimeoutIds属性：

debounceTimeout存储

コールがある場合@debounce、標識の方法中：
..機能の1のsetTimeout遅延実行、オブジェクトがタイムアウトを返し、
返された2タイムアウトオブジェクトはに格納されます。debounceTimeoutIds[key]（でupdateContent方法の例として、debounceTimeoutIds[key]キー値はここにあるupdateContent）;
3リピートコール。前カバーこの方法は、タイムアウトオブジェクトを再作成するdebounceTimeoutIds[key]（各コールがどこupdateContent再することでdebounceTimeoutIds['updateContent']割り当てを）

setTimeout（ （） => { 削除 debounceTimeoutIds [キー]; 場合！（即時）{       callback.applyは（この、引数）;     }   }、待機します）。

結果の実装はこれです：たびに、再度、待って待っての値に対応するキーであるコールバックメソッド、コールバックメソッドを実行して行きます。

オリジナル：大列 --debounceのコア-デコレータソースの解析