Obtenir des fonctions à exécuter au bon moment (en file d'attente ou simultanément)

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

  •  30-10-2019
  •  | 
  •  

Question

J'ai écrit un petit script qui mélange au hasard une série de divs - cela fonctionne comme prévu (ou espéré).

Mon problème réside dans la mise en œuvre. Je veux que les divs disparaissent, soient mélangés et disparaissent à nouveau. Ce que j'ai trouvé, c'est que la fonction Movebox () exécute simultanément avec toute animation. J'ai essayé d'appeler l'IT comme une fonction de rappel sur tous les éléments (Fadeout, Delay et Fadein) dans l'animation, mais toujours avec le même effet - le mélange et la redistribution des Divs se produisent pendant l'animation, et est donc visible.

J'ai une solution (var ts = timeout ...) qui fait que le shuffle se produise pendant que les divs sont cachés, mais je ne suis pas convaincu que c'est la meilleure solution.

Je voudrais savoir comment contrôler l'ordre d'exécution des fonctions et s'ils doivent exécuter simultanément ou en séquence. Mon code:

<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>

Merci d'avance

Pas de solution correcte

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top