Re: [閒聊] JQuery的callback與queue

看板Ajax作者s25g5d4 (死城盜賊)時間15年前 (2010/08/27 18:45)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串2/4 (看更多)

※ 引述《JYHuang (夏天到了，冷不起來了說)》之銘言： : 這幾天在寫一個grid的功能，遇到了一點小問題。 : 就拿出來討論一下。 : ╔═╦═╦═╗ : th ║1 ║2 ║3 ║ : ╟─╫─╫─╢ : td ├─┼─┼─┤ : td ├─┼─┼─┤ : td └─┴─┴─┘ : 簡單的說，我要做的動作大至上是click th[n]時， : th跟每列的第n個td都做fadeOut的動作 : 然後再用test()計算table的寬度 : 首先 : $("thead th").click(function(){ : var index =$(this).index(); : $("td:eq("+index+")","tr").fadeOut('slow'); : test(); : }); : 當然..事情沒憨人想的這麼簡單 : javascript的指令是不會停下來等動作執行完再執行下一行的其實是jQuery跑特效時不知用了什麼方法使得程式不會卡在特效跑完才繼續我猜應該是用setTimeout的方式吧... 事實上javascript還是一行跑完才跑下一行的 : 所以fadeOut這種有時間軸的動作會跟test()一起被執行 : 這樣一來計算出來的寬度就有誤了。 : 所以接著試試看callback : $("thead th").click(function(){ : var index =$(this).index(); : $("td:eq("+index+")","tr").fadeOut('slow',test); : }); : 不過問題又來了.. : 要執行的對像是一個集合.. : 所以callback會被每一個子元件重複的執行... : 此時想到了JQuery還有一個queue的功能.. : 不過看了半天官方API文件還是一頭霧水..只好慢慢踹.. : jQuery.queue( $("td:eq("+index+")","tr")[0], "fx", function () { : test(); : jQuery.dequeue( this ); : }); : 問題在紅色的框那裡.. : 那個框似乎是指集合的index : 當集合第index個元件執行完之後才會跑test()，而這裡是以元件的集合做動作 : 所以如果照著官方給[0]的話 : 會在第一行的td fadeOut後就執行test了 : 所以要先計算出集合的長度.. : var _len = $("td:eq("+index+")","tr").size() : jQuery.queue( $("td:eq("+index+")","tr")[_len -1], "fx",.... : 或是直接指向集合的最後一個元件 : jQuery.queue( $("td:eq("+index+")","tr").filter(":last")[0], "fx",..... : 這邊用filter而不是selector中用:last，是因為這是指所以集合中的最後一個 : 直接在Selector中用:last的話，會是指每個tr第index個td的最後一個 : JQuery的selector好複雜 =.=... 其實只要用$(selector).last()就好了~囧 : 另外... : 那個dequeue的功用到底是？ queue很好很強大簡單的說就是插隊就對了~ 例如一堆人排隊買飲料一般的店(javascript)都是前面的人先結帳而且拿到飲料下一個人才能結帳買飲料而換jQuery開店就變成一樣排隊結帳但是結完帳以後就先去旁邊等飲料換下一個人去結帳然後去旁邊等飲料下一個又遞補上去... 然後現在有個人插隊(queue)進去他很機車他先等其他結帳完的人拿到飲料離開後才結帳他結帳完以後就一樣去旁邊等飲料其他人繼續結帳而dequeue的意義就是那個插隊的人離開的動作如果用jQuery.queue的方式是一定要加dequeue 不過具體上我也不了解deuqueue到底是什麼意思 @@" 因為$(selector).queue()沒加dequeue也會跑阿... 一個簡單的範例： http://jsfiddle.net/9qx9z/2/ 剛剛改了一下範例各位可以注意div#x淡出時 th、td也在淡出代表即使特效執行中程式還是繼續往下跑同時div#c也在淡入而等到th、td淡出效果跑完以後 div#a緊接著寫上'%'與'@' 同時block1也在淡出此時queue插隊完 th、td又再度淡入也就是順序的去執行特效以這個範例來說 th、td的順序是 th、td先是淡出然後queue插隊進來等到淡出結束以後就換queue執行 queue執行完以後才換淡入執行 -- 推 onion0350754:＿＿子，＿不異空，空不異＿＿，＿即是空，空即是＿ 07/27 17:49 推 wannahappy2: 射精 07/27 17:50 推 shirami:　　　　　　射 07/27 18:02 推 onion0350754: 身寸 07/27 18:04 推 tony1688: 穴穴 07/27 18:10 推 onion0350754:好糟糕～～！萬一＿經真的改成那樣就GJＲＺ！！(啊們 07/27 18:14 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.127.208.70 ※ 編輯: s25g5d4 來自: 59.127.208.70 (08/27 19:15)