javascript - 在javascript中延迟交替无限执行两个函数

Question

我有四个 div，我想通过隐藏前一个来一个接一个地显示。我使用带模运算符的计数器来选择要显示的 div。所以我需要按以下方式执行我的功能。

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

您可以使用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 为 false，因此它将显示 div 并翻转布尔 divVisible。下一次（1000 毫秒后），它将隐藏 div，增加计数器，然后再次翻转布尔 divVisible。因此，它将永远持续到您的 4 个 div。

Answer 2

一个简短的解决方案：

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 3

您可以使用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 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>