Создайте цикл обратного вызова с классами CoffeeScript и jquery.transit

Question

Создайте цикл обратного вызова с классами CoffeeScript и jquery.transit

0

С jquery.transit я хочу построить цикл, используя параметр jquery.transit callback. Я не хочу использовать setTimeout() чтобы избежать возможных условий гонки.

Следующий код работает: http://jsfiddle.net/2errn/

$ ->
  animate = () ->
    console.log "animate()"
    $(".rect").transition({x: 10}, animate)
  animate()

Прямоугольник перемещается только один раз, но в консоли ясно, что метод вводится несколько раз. Так что это работает! Чтобы заставить его двигаться чаще, мне нужно будет добавить счетчик приращений к координате x, но это не проблема.

Я хотел инкапсулировать функциональность в классе, и здесь он терпит неудачу: http://jsfiddle.net/6A97m/1/

$ ->
  class Animator
    animate: ->
      console.log "animate()"
      $(".rect").transition({x: 10}, @animate)

    new Animator().animate()

Функция вводится всего два раза до остановки вывода оператора журнала. Почему это? Как я могу это исправить?

Mahoni 15 дек. 2013, в 19:02

Источник

Теги:

javascript

jquery

animation

transition

coffeescript

1 ответ

Ещё вопросы

mu is too short · Accepted Answer · 2013-12-15T17-04-00.000Z

Это просто ссылка на несвязанные функции:

@animate

Эта ссылка не привязана к определенному @ поэтому @ будет выбрана, когда она будет вызвана. В частности, @ не будет вашим экземпляром Animator поэтому @animate будет не undefined во второй раз, когда вы его получите.

Если вы измените свой console.log на это:

console.log @, "animate()"

Вы увидите, что @ - ваш экземпляр Animator при первом вызове animate но это второй раз.

Существуют различные решения:

Используйте связанный метод:
```
animate: =>
  console.log "animate()"
  $(".rect").transition({x: 10}, @animate)
```
Демо: http://jsfiddle.net/ambiguous/3puUe/
Привяжите animate когда вы передаете ее с помощью bind:
```
animate: ->
  console.log "animate()"
  $(".rect").transition({x: 10}, @animate.bind(@))
```
Демо: http://jsfiddle.net/ambiguous/BPSa9/
Вручную настройте соответствующий @ используя старый _this = this трюк:
```
animate: ->
  console.log "animate()"
  _this = @
  $(".rect").transition({x: 10}, -> _this.animate())
```
Демо: http://jsfiddle.net/ambiguous/p4z8x/

Большинство библиотек инструментальных средств не имеют собственных методов привязки, если вы не можете гарантировать, что Function.bind будет доступна: _.bind, $.proxy ,...

Отлично, спасибо. Я не знал, что связанный метод с использованием => может быть применен и здесь, но я начинаю понимать. Благодарю.