2

前の div を非表示にして、次々に表示したい 4 つの 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)

どうすればこれを達成できますか？

4

4 に答える 4

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 に対して永遠に続きます。

于 2015-06-24T18:43:45.217 に答える
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);
}
于 2015-06-24T18:43:52.180 に答える
0

使用できます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);
}

これは、終了時にsetTimeoutother を呼び出すために使用しますsetTimeouts。これは、他のソリューションよりも少ないメモリを使用します。

于 2015-06-24T18:39:24.073 に答える
0

次の方法で実行できます。

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>

于 2015-06-24T18:43:54.910 に答える