2013-03-29 75 views
0

我一直在使用CoffeScript和JQuery。我需要創建一個簡單的動畫。Queue()/ dequeue()JQuery不能正常工作

我嘗試使用延遲,我根本不明白,所以我之前讀了一個問題:

Link from this page

所以我決定用隊列;主要的問題是隻考慮動畫的最後一個元素,儘管隊列中有更多的元素。

我希望你能幫助我:),你可以找到下面的代碼。

隊列中的所有元素(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') 
+0

可能是你的縮進以某種方式搞砸所以循環耗盡和代碼的其餘部分只使用proc'的'最後一個值(外循環)。 – jdb

+0

我不明白。我已經使用輔助隊列解決它並單獨添加效果。謝謝,我會再次閱讀我的代碼,縮進有時候會讓人頭疼。 –

回答

1

恭喜!對抗所有JavaScript(或Cof​​feeScript)開發人員的頭腦是一種儀式。你肯定會最終遇到它。的解釋是雙重的:

  • 的JavaScript(和CoffeeScript的)變量函數作用域,不塊作用域
  • Closures

基本上,每個迭代將創建一個功能與所述可變idFinal基準,而不是通過該循環迭代的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 
+0

哇,似乎我有很多事情要了解JS和CoffeeScript,我已經用其他方法解決了這個問題,謝謝無論如何,我會檢查你給的鏈接,以提高自己:) –

0

我找到了一個替代的解決方案,如果別人有同樣的問題我寫下面的代碼,不管怎樣,謝謝:)

所有的代碼是在CoffeeScript的。

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) 

最後,你只需要調用

:你想要什麼動畫

動畫元素類

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

迭代210

我希望它可以成爲別人:)有用