0

我一直在使用 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')
4

2 回答 2

1

恭喜！反对这一点是所有 JavaScript（或 CoffeeScript）开发人员的通行仪式。你最终一定会遇到它。解释是双重的：

  • JavaScript（和 CoffeeScript）变量是函数范围的，而不是块范围的
  • 闭包

基本上，每次迭代都会创建一个引用变量 idFinal的函数，而不是循环中该次迭代的值。idFinal因此，当以后的迭代发生变化时idFinal，它会针对您创建的所有函数进行更改。有关行为的更简单示例，请参见此处：

循环内的 JavaScript 闭包——简单实用的示例

在 CoffeeScript 中解决这个问题的一种方法是在结构中引入一个新的范围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 回答