Re: [閒聊] JQuery的callback與queue

[TonyQ (沉默是金。)]

※ 引述《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
→ s25g5d4:很酷的方法... 囧
→ JYHuang:結果最我還是直接用hide...
→ TonyQ:嘿啊 其實這麼多欄去隱藏真的不如hide，負擔太大。
推 JYHuang:不過寫這個仿flexgrid的gird最痛苦的還是針對ie6去修正
→ JYHuang:要一次面對一堆IE6下event的CSS的"特立獨行" 囧rz
推 s25g5d4:T大的簽名檔都超有格調的 (我絕對不會說其實是我看不懂)
推 s25g5d4:#1CP16l4K 這個專輯介紹的網頁快做好了 整理code以後會放
→ s25g5d4:上來給各位批評@@"
→ s25g5d4:問題在去cache變數的話 都會交叉影響到...
→ s25g5d4:不做cache效能又差...不過實際上也是那十幾ms的差距而已
→ TonyQ:cache  會交叉影響到有幾個可能性，第一個是可能不該做cache
→ TonyQ:第二個是你可能沒有給對 scope ，有些時候我們會把變數cache
→ TonyQ:在元件上，這樣就可以by 元件來設定cache .(更正是 context