Выполнять две функции попеременно и бесконечно в javascript с задержкой

Question

У меня есть четыре divs, которые я хочу показать один за другим, скрывая предыдущий. Я использую счетчик с оператором modulo для выбора divs для отображения. Поэтому мне нужно выполнить мои функции следующим образом.

function show_div(counter) 
***after delay*** 
function hide_div(counter) 
***after delay*** 
function show_div(counter+1) 
***after delay*** 
function hide_div(counter+1) 
***after delay*** 
function show_div(counter+2) 

Как я могу это достичь?

Answer 1

Короткое решение:

show_div(0); 
function show_div(counter) { 
    // code here 
    setTimeout(hide_div, 2000, counter); 
} 
function hide_div(counter) { 
    // code here 
    setTimeout(show_div, 2000, (counter + 1) % 4); 
} 

Answer 2

Вы можете использовать setTimeout.

setTimeout(function(){show_div(counter)},delay) 

Но будьте осторожны. Если вы используете цикл while, вам нужна отдельная функция, которая создает тайм-аут из-за переменной области.

function timeout(func, args, delay){ 
    setTimeout(function(){func(args)}, delay); 
} 

var counter = 0 
while(1){ 
    timeout(show_div, counter, counter*500); 
    timeout(hide_div, counter, counter*500+500); 
    counter++; 
} 

Альтернативное решение может быть каким-то СЦЕПЛЕНИЕ функции:

function show(delay, counter){ 
    setTimeout(function(){ 
    show_div(counter); 
    },delay); 
    setTimeout(function(){ 
    hide_div(counter); 
    show(delay, counter+1); 
    },delay*2); 
} 

Это использует setTimeout для вызова другого setTimeouts, когда она будет закончена. Это будет использовать меньше памяти, чем другое решение.

Answer 3

Вы можете использовать setInterval():

var counter = 0; 
var divVisible = false; 

function toggleDiv() { 
    if (divVisible) { 
     hide_div(counter); 
     counter = (counter + 1) % 4; 
     divVisible = false; 
    } else { 
     show_div(counter); 
     divVisible = true; 
    } 
} 

window.setInterval(toggleDiv, 1000); 

Первый раз она выполняется, счетчик 0 и divVisible ложно, поэтому он будет показывать DIV и переворачивать булево divVisible. В следующий раз (после 1000 мс) он скроет div, увеличит счетчик, а затем снова перевернет логическое divVisible. И так будет продолжаться вечно для ваших 4-х дивизий.

Answer 4

Вы можете сделать это следующим образом:

var divs = $('.someClass'), 
 
    numOfDivs = divs.length, 
 
    delay = 500, 
 
    index = -1; 
 

 
showNextDiv(); 
 

 
function showNextDiv(){ 
 
    index = (index == numOfDivs-1) ? 0 : ++index; 
 
    divs.eq(index).show(); 
 
    setTimeout(hideDiv, delay); 
 
} 
 

 
function hideDiv(){ 
 
    divs.eq(index).hide(); 
 
    setTimeout(showNextDiv, delay); 
 
}

.someClass{ display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<div class="someClass">1</div> 
 
<div class="someClass">2</div> 
 
<div class="someClass">3</div> 
 
<div class="someClass">4</div>