適切なタイミングで実行する関数を取得する（キューに並んでいるか、同時に）

StackOverflow https://stackoverflow.com/questions/5927222

  •  30-10-2019
  •  | 
  •  

質問

私は一連のDIVをランダムにシャッフルする小さなスクリプトを書きました - これは期待どおりに機能します（または期待されます）。

私の問題は実装にあります。 Divをフェードアウトし、シャッフルし、再びフェードインしたいと思います。私が見つけたのは、関数movebox（）が任意のアニメーションと同時に実行することです。アニメーションのすべての要素（フェードアウト、遅延、フェデイン）のコールバック関数としてITを呼び出してみましたが、常に同じ効果があります。

私にはソリューション（var ts =タイムアウト...）があります。

機能の実行順序を制御する方法と、それらが同時にまたは順番に実行すべきかどうかを知りたいと思います。私のコード：

<style>
    .tester{
        float:left;
        width:100px;
        height:100px;
        margin:5px;
        }
    .tester p{text-align:center;
        margin-top:20px;
    }
    .one{background-color:red;}
    .two{background-color:yellow;}
    .three{background-color:teal;}
    .four{background-color:blue;}
    .five{background-color:green;}
    .six{background-color:silver;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        var anibase=jQuery(".tester").length;
        jQuery(".tester").fadeOut(1000);
        function moveBox(){
            function shuffle(){
                for (i = 0; i <= (anibase - 2); i++) {
                    mover = Math.floor(Math.random() * (anibase - i));
                    if (mover != 0) {
                        mover = mover + i;
                        jQuery(".tester:eq(" + mover + ")").insertBefore(".tester:eq(" + i + ")");
                    };
                };
            };
            jQuery(".tester").fadeOut(1500).delay(500).fadeIn(1500);
            var ts = setTimeout(shuffle,1500);
            var t=setTimeout(moveBox,5000);
        };
        moveBox();
    });

</script>
<body>
    <div class="tester one">
        <p>box 1</p>
    </div>
    <div class="tester two">
        <p>box 2</p>
    </div>
    <div class="tester three">
        <p>box 3</p>
    </div>
    <div class="tester four">
        <p>box 4</p>
    </div>
    <div class="tester five">
        <p>box 5</p>
    </div>
    <div class="tester six">
        <p>box 6</p>
    </div>
</body>

前もって感謝します

正しい解決策はありません

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top