jQuery setInterval Loop - PullRequest
Новая
       27

jQuery setInterval Loop

0 голосов
/ 25 октября 2011

Это мой первый раз, когда я создаю цикл в jQuery или js, и я забрался.

У меня есть фрагмент содержимого, который нужно зациклить при загрузке страницы: 

<li id="nav_about"><a href="">Loren ipsum <span id="adjective">1</span></a>
</li>

Через регулярные промежутки времени для выхода из строя следующих функций (замены текста), а затем, когда цикл достигает последней функции, чтобы вернуться наверх и начать все заново. 

{$("#adjective").fadeOut(500).delay(100).text("2").fadeIn(500);}
{$("#adjective").fadeOut(500).delay(100).text("3").fadeIn(500);}
{$("#adjective").fadeOut(500).delay(100).text("4").fadeIn(500);}
{$("#adjective").fadeOut(500).delay(100).text("1").fadeIn(500);}

Я знаю, что мне нужно использовать setInterval, определить переменную и каким-то образом создать здесь функцию, но, честно говоря, я заблудился относительно того, как части сочетаются друг с другом.

Мое предположение о том, что дажеэто довольно неуклюжий способ достижения этого, и, скорее всего, существует метод определения терминов .text в качестве переменных в массиве, чтобы избежать множественных .fadeOuts и .fadeIns.

Здесь наверняка можно использовать некоторую помощь.

Ответы [ 4 ]

2 голосов
/ 25 октября 2011

Вот способ сделать то, что (я думаю) вы хотите.

http://jsfiddle.net/bryanjamesross/kdbYk/

Ваш инстинкт кишки был верным.Тем не менее, обратите внимание, как я должен был использовать обратный вызов при исчезновении.Это необходимо, потому что по какой-то причине помещение в цепочку вызова text() заставило его ждать, пока вся анимация не закончилась, прежде чем изменять текст.

1 голос
/ 25 октября 2011

Вы делаете это неправильно.Вам не нужен setInterval здесь.

Первое, что вам нужно знать, это то, что, как вы написали, все эти команды будут запускаться одновременно , то есть вы будете появляться и исчезатьв то же время (что будет выглядеть странно).Когда вы объединяете команды, они не ждут - все они работают одновременно.Вместо этого вы используете функцию обратного вызова, когда каждая анимация завершается, она вызывает обратный вызов, который выполняет следующий шаг.

Измените его следующим образом: 

function fader(text, next) {
  $("#adjective").fadeOut(500, function() {
    $(this).text(text).delay(100).fadeIn(500, function() {
      next();
    });
  });
}

function fader2() { fader('2', fader3); }
function fader3() { fader('3', fader4); }
function fader4() { fader('4', fader1); }
function fader1() { fader('1', fader2); }

fader2();

Функция фейдера выполняет каждый шаганимация.Затем, когда завершается финальная анимация, она вызывает переданную функцию для продолжения цикла.

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

PS.Я не проверял это, могут быть опечатки.

0 голосов
/ 25 октября 2011

Вам не нужно setInterval здесь.Вы можете просто запустить последовательность и затем запустить следующую последовательность, когда предыдущая закончится.

Вот один из способов сделать это, используя функции завершения, чтобы запустить следующую операцию после завершения анимации.Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/PTZXV/.

Код такой: 

function cycle(cntr) {
    if (cntr > 4) { cntr = 1; }
    var o = $("#adjective");
    o.fadeOut(500, function() {
        o.text(cntr + "").delay(100).fadeIn(500, function() {
            cycle(++cntr);
        });
    });
}

cycle(2);

К вашему сведению, вы не можете использовать такие последовательности: 

$("#adjective").fadeOut(500).delay(100).text("2").fadeIn(500);

Методы delay(100) работают только между методами, находящимися в очереди анимации FX, а операция .text("2") не использует очередь анимации FX, поэтому она не будет должным образом упорядочена с другими операциями.Вот почему мне пришлось использовать функции завершения до и после метода .text().

Редактировать : чтобы операция прошла через очередь анимации (так будетсоблюдайте методы .delay() и другие последовательности в очереди анимации), вы можете использовать метод .queue().Вы можете сделать это так: 

function cycle(cntr) {
    if (cntr > 4) { cntr = 1; }
    var o = $("#adjective");
    o.fadeOut(500)
        .queue(function(next) {o.text(cntr + ""); next();})
        .delay(100)
        .fadeIn(500, function() {cycle(++cntr);});
}

cycle(2);

Что вы можете увидеть здесь: http://jsfiddle.net/jfriend00/mkyTQ/.

0 голосов
/ 25 октября 2011

Первое, что вы должны сделать, это разбить это на части. Вместо того, чтобы работать с автоматическим циклом, сначала работайте над тем, чтобы сначала запустить функцию, а затем вызовите ее в цикле.

начните с работы этой функции: 

function myLoop(){ 
  var max = 4
  var min = 0
  // find the element and decrement it's value
  // if the element's value is below the minimum, set it to the maximum
}

и подключить его выполнение до нажатия кнопки: 

$("#myButton").live("click", myLoop);

тогда, когда у вас есть функция, работающая правильно при каждом нажатии кнопки, запустите ее в цикле по времени: 

setInterval(myLoop, /*time in milliseconds*/)
...