クラス関数をthrottleするデコレータ

Published at 2017-07-15

掲題の通り、throttle してくれる 1000ch/throttle-decorator というモジュールを作った。ES Decorator については全力で ES Decorator使ってみたが参考になると思う。標準化されるか問題は一旦さておいて。

インストールと使い方

npm でインストールする。

$ npm install --save-dev throttle-decorator

旧来 throttle() するときは宣言してあるイベントハンドラに throttle() を挟んで新たな名前付き関数を宣言していたと思う。React のコンポーネントの例だと次のようになる。

import throttle from 'lodash.throttle';

class Foo extends React.Component {
  constructor() {
    this.onChange = throttle(this.onChange, 100);
  }

  onChange() {
    console.log('changeイベントを間引きたい');
  }

  render() {
    return <input onChange={this.onChange} />;
  }
}

そこで throttle-decorator を使うと、次のように書ける。

import throttle from 'throttle-decorator';

class Foo extends React.Component {  
  @throttle(100)
  onChange() {
    console.log('changeイベントを間引きたい');
  }

  render() {
    return <input onChange={this.onChange} />;
  }
}

Class と Property のデコレータは現在策定中で、今は Stage 2 である。まだ仕様が未完成な状態だが、Angular もモリモリ使っているようだしそのうち来るだろう（…と楽観している）。このご時世トランスパイラ前提になるのは諦めているので、互換性は然程気にしていないが、ECMAScript なら Safari もそこそこスピード感ありそうだし、心配していない。