在 javascript 中交替无限地执行两个函数并延迟
Execute two functions alternately and infinitely in javascript with delay
我有四个 div,我想通过隐藏前一个来一个接一个地显示。我使用带有模运算符的计数器来 select 用于显示的 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)
我怎样才能做到这一点?
您可以使用 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
。这将比其他解决方案使用更少的内存。
您可以使用 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 divs.
一个简短的解决方案:
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);
}
你可以这样做:
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>
我有四个 div,我想通过隐藏前一个来一个接一个地显示。我使用带有模运算符的计数器来 select 用于显示的 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)
我怎样才能做到这一点?
您可以使用 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
。这将比其他解决方案使用更少的内存。
您可以使用 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 divs.
一个简短的解决方案:
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);
}
你可以这样做:
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>