Re: [閒聊] JQuery的callback與queue

看板Ajax作者TonyQ (沉默是金。)時間15年前 (2010/08/27 23:46)推噓3(3推 0噓 10→)

留言13則, 3人參與討論串4/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的指令是不會停下來等動作執行完再執行下一行的 : 所以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 ); : }); 你的問題其實很單純，你想在一整個 col （有k個td + 1th ） fadeOut後，執行一些事情。基本上因為每個 td/ th 都會有自己不同的 fx queue ，（這個複雜度是來自於context）所以 queue 我個人會覺得對你沒啥用，你很難確保哪一個會最晚執行完，這要看 jQuery 實做 fadeIn / fadeOut 的timer，基本上timer 這種事情很難掌握先來後到，變數很大。除非你可以忍受 k個 td+1th 「一個一個執行 fadeOut」後再做你要做的事情。那基本上你可以把 fadeIn/Out 這件事寫在某個第三方的context queue裡。所以，我就會推薦你一個很蠢，但是保證有效的方案。 $("thead th").click(function(){ var index =$(this).index(); var counter = 0 ; var size = $("td:eq("+index+")","tr").size(); $("td:eq("+index+")","tr").fadeOut('slow',function(){ counter++; if(size == counter){ test(); } ); }); 大概是類似這樣，總之，凡事只要是扯上生命週期，都是很複雜的... -- I am a person, and I am always thinking . Thinking in love , Thinking in life , Thinking in why , Thinking in worth. I can't believe any of what , I am just thinking then thinking , but worst of all , most of mine is thinking not actioning... -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.136.202.202