Question

我正在使用函数window.requestAnimationFrame。

我不知道为什么，但是当我点击“播放”时，它只会触发一次而不是连续触发

html是

<button id='play'>Play</button>
<button id='pause'>Pause</button>

coffeeScript中的代码

class Counter
  i:0
  init: () ->
    $('#play').click @fire.bind(@)
    $('#pause').click @unfire.bind(@)
  fire:() ->
    window.requestAnimationFrame @update.bind(@)
  unfire:() ->
    window.cancelAnimationFrame @update.bind(@)
  update: () ->
    $('h1').remove()
    $('<h1></h1>').appendTo 'body'
    $('h1').text @i
    @i++

tick = new Counter()
tick.init()

codepen中的脚本：http://codepen.io/helloncanella/pen/mJrwwP?editors=101

Answer 1

解决。

我忘了在更新功能里面调用window.requestAnimationFrame @ update.bind（@）

Answer 2

class Banana
  i:0
  animation: null

  init: () ->
    $('#play').click @fire.bind(@)
    $('#pause').click @unfire.bind(@)

    console.log @fire
  fire:() ->
    @animation = requestAnimationFrame(@update.bind(@))
  unfire:() ->
    cancelAnimationFrame(@animation)
  update: () ->
    $('h1').text @i
    $('<h1></h1>').appendTo 'body'
    @i++
    @animation = requestAnimationFrame(@update.bind(@))

fruit = new Banana()
fruit.init()

window.requestAnimationFrame的唯一触发

2 个答案: