Question

我一直在使用CoffeScript和JQuery。我需要创建一个简单的动画。

我尝试使用延迟，我根本不理解它，所以我之前读过一个问题：

所以我决定使用队列;主要的问题是，虽然队列中有更多元素，但只考虑动画的最后一个元素。

我希望你能帮助我:)，你可以找到下面的代码。

队列中的所有元素（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')

Answer 1

恭喜！对所有JavaScript（或CoffeeScript）开发人员来说，这是一个成熟的仪式。你最终会遇到它。解释是双重的：

JavaScript（和CoffeeScript）变量是函数作用域，而不是块作用域
Closures

基本上，每次迭代都会创建一个函数，引用变量 idFinal，而不是{em>值 idFinal在那次迭代中通过环。因此，当稍后的迭代更改idFinal时，它会针对您创建的所有函数更改它。请参阅此处以获取更简单的行为示例：

JavaScript closure inside loops – simple practical example

在CoffeeScript中解决这个问题的一种方法是引入一个带有do结构的新范围：

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

Answer 2

我找到了另一种解决方案，如果其他人遇到同样的问题，我会编写下面的代码，无论如何，谢谢：）

所有代码都在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()

我希望它可能对其他人有用：）

Queue（）/ dequeue（）JQuery无法正常工作

2 个答案: