hitode909の日記

趣味はマリンスポーツですの日記です

jQuery Deferredでthrottle,debounce

throttle(500)が最大で0.5秒ごとにしか実行されないDeferredオブジェクトを返す,みたいなのを作ってみた.
timerを持っておいてclearTimeoutするかわりに,Deferredを持っておいて,rejectすることができる.
処理内容を実行時に決められるので,普通のthrottleより汎用性が高いかもしれない.
呼び出された回数だけタイマーが実効されるので,普通に書くより効率は悪いと思う.


こういう風に使える.

# Deferredを返す
th = throttle(500)

# 0.5秒経つと呼ばれる
th('hello').then (msg) ->
  console.log(msg)

# こっちは実行されない
th('good bye').then (msg) ->
  console.log(msg)


コードはあまりかっこよくない.
debounceのほうがかっこいい.

throttle = (delay) ->
  d = null
  ->
    return $.Deferred().promise() if d
    d = $.Deferred()
    args = arguments
    setTimeout ->
      d.resolve args
      d = null
    , delay || 100
    d.promise()

debounce = (delay) ->
  lastd = $.Deferred()
  ->
    lastd.reject()
    d = $.Deferred()
    lastd = d
    args = arguments
    setTimeout ->
      d.resolve args
    , delay || 100
    d.promise()


jQuery Deferred, throttle, debounce — Gist