0

私は CoffeScript と JQuery を使用してきました。簡単なアニメーションを作成する必要があります。

delay を使ってみたのですが、まったくわからなかったので、前に質問を読みました。

このページからのリンク

そこで、キューを使用することにしました。主な問題は、キューにはさらに多くの要素が含まれているにもかかわらず、アニメーションの最後の要素だけが考慮されることです。

あなたが私を助けてくれることを願っています:)、あなたは以下のコードを見つけることができます.

キュー内のすべての要素 (CoffeScript)。

    for proc in listaDeProcesos
    id = proc.id
    nombre = proc.nombre
    idFinal = "#{id}#{nombre}"
    tiempo = parseInt(proc.tejecucion)
    $("#animacion").queue('chain',(next)->
            $("##{idFinal}").fadeOut(tiempo,->
                    next()
                )
        )

デキュー関数呼び出し:

        $("#animacion").dequeue('chain')
4

2 に答える 2

1

おめでとう！これに頭を悩ませることは、すべての JavaScript (または CoffeeScript) 開発者にとっての通過儀礼です。あなたは最終的にそれに遭遇するに違いありませんでした。説明は 2 つあります。

  • JavaScript (および CoffeeScript) 変数は関数スコープであり、ブロック スコープではありません
  • 閉鎖

基本的に、各反復は、変数 への参照を使用して関数を作成しますが、ループを介したその反復での値ではidFinalありません。したがって、後で反復が変更されると、作成したすべての関数に対してそれが変更されます。動作の簡単な例については、こちらを参照してください。idFinalidFinal

ループ内の JavaScript クロージャー – 簡単な実用例

CoffeeScript でこれを回避する 1 つの方法は、次のdo構文で新しいスコープを導入することです。

for {id, nombre, tejecucion} in listaDeProcesos
  do (idFinal = "#{id}#{nombre}", tiempo = parseInt(tejecucion)) ->
    $("#animacion").queue 'chain', (next) ->
      $("##{idFinal}").fadeOut tiempo, next
于 2013-03-29T19:53:35.893 に答える
0

他の誰かが同じ問題を抱えている場合に備えて、別の解決策を見つけました。以下にコードを記述します。とにかくありがとう:)

すべてのコードは coffeescript にあります。

アニメーション要素クラス

class animatedElement
constructor: (@element,@time) ->
showInfo: ->
    alert ("#{@element} >> #{@time}")

アニメートしたいものの反復:

for proc in listaDeProcesos
    id = proc.id
    nombre = proc.nombre
    idFinal = "#{id}#{nombre}"
    tiempo = parseInt(proc.tejecucion)
    elemento = new animatedElement($("##{idFinal}"),tiempo)
    queue.push(elemento)

補助機能

showAnimation = ()->
if (queue.length > 0)
    tiempo = queue[0].time
    (queue.shift().element).fadeOut(tiempo, showAnimation)

そして最後に、あなたはただ電話する必要があります

showAnimation()

他の誰かに役立つことを願っています:)

于 2013-03-29T19:55:33.123 に答える