Получение функций для выполнения в нужное время (в очереди или одновременно) - PullRequest
Новая
       392

Получение функций для выполнения в нужное время (в очереди или одновременно)

0 голосов
/ 08 мая 2011

Я написал небольшой скрипт, который случайным образом перетасовывает серию div-ов - это работает, как и ожидалось (или надеется).

Моя проблема в реализации.Я хочу, чтобы div исчезали, перетасовывались и снова появлялись.Я обнаружил, что функция moveBox () выполняется одновременно с любой анимацией.Я попытался вызвать его как функцию обратного вызова для всех элементов (fadeOut, delay и fadeIn) в анимации, но всегда с одним и тем же эффектом - перемешивание и перераспределение элементов div происходит во время анимации и поэтому является видимым.

У меня есть решение (var ts = timeOut ...), в котором происходит случайное перемешивание, пока элементы div скрыты, но я не уверен, что это лучшее решение.

Я бы хотелзнать, как контролировать порядок выполнения функций и должны ли они выполняться одновременно или последовательно.Мой код: 

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

заранее спасибо

1 Ответ

0 голосов
/ 08 мая 2011

JQuery имеет возможность вложения функций, эффективно контролируя порядок выполнения.

Прежде всего, хотя вложение функций в Javascript допустимо, в этом случае нет необходимости, рассмотрим следующий код: 

<script type="text/javascript">

  jQuery(document).ready(function(){
    moveBox();  //call the function that will do the work and then setTimeout
  });



  function moveBox(){
    jQuery(".tester").fadeOut("slow",function(){
      shuffle();
      $(this).fadeIn("slow");
      return;
    });
    var t=setTimeout(moveBox,5000);
  }

  function shuffle(){
    var anibase=jQuery(".tester").length;
    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 + ")");
      }
    }
  }
</script>

Здесь важно обратить внимание на следующее: 

jQuery(".tester").fadeOut("slow",function(){
  shuffle();
  $(this).fadeIn("slow");
  return;
});

Это заставит jQuery

  1. Fade Out элемента .tester
  2. Когда затухание завершено, выполните shuffle ()
  3. Затем верните элементы обратно в

Другие примеры вы можете увидеть в документации fadeOut в некоторых примерах показаны цепочечные события

Кроме того, если разделить определения функций, это значительно облегчает чтение.

...