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并翻转boolean divVisible。下一次（在1000ms之后），它将隐藏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>

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

4 个答案: