如何在 jQuery 中重复函数调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14537522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to repeat a function call in jQuery
提问by user1492776
I have this code:
我有这个代码：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function loop(){
$('#picOne').fadeIn(0).fadeOut(8000);
$('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
$('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
$('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
}
loop();
});
</script>
But when the last pic fades out, the code doesn't repeat. What is the problem?
但是当最后一张图片淡出时，代码不会重复。问题是什么？
回答by Felix Kling
Assuming you want to duration of the animation being the same for each element:
假设您希望每个元素的动画持续时间相同：
var $elements = $('#picOne, #picTwo, #picTree, #picFour');
function anim_loop(index) {
// Get the element with that index and do the animation
$elements.eq(index).fadeIn(1000).delay(3000).fadeOut(1000, function() {
// Kind of recursive call, increasing the index and keeping in the
// the range of valid indexes
anim_loop((index + 1) % $elements.length);
});
}
anim_loop(0); // start with the first element
I don't know exactly how the animation should be, but I hope it makes the concept clear.
我不知道动画应该是怎样的，但我希望它能让概念清晰。
Update:To simultaneously fade out and in an image after a certain time period, use setTimeoutand call fadeOutand anim_loopin the callback:
更新：要在特定时间段后同时淡出和淡入图像setTimeout，请在回调中使用并调用fadeOut和anim_loop：
$elements.eq(index).fadeIn(1000, function() {
var $self = $(this);
setTimeout(function() {
$self.fadeOut(1000);
anim_loop((index + 1) % $elements.length);
}, 3000);
});
回答by Mateusz Rogulski
There are no problem couse your function is called only once.
没有问题，因为您的函数只被调用一次。
If you want to looped them you can use setInterval()or setTimeout()
如果你想循环它们，你可以使用setInterval()或setTimeout()
setInterval(function(){loop()}, 16000);
function loop(){
$('#picOne').fadeIn(0).fadeOut(8000);
$('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
$('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
$('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
}
or
或者
function loop(){
$('#picOne').fadeIn(0).fadeOut(8000);
$('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
$('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
$('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
setTimeout(function(){loop()}, 16000);
}
In both cases function will be called every 16 seconds = 16000 miliseconds.
在这两种情况下，函数都会被调用16 seconds = 16000 miliseconds。
回答by user2631532
I would like to say that this function does work well, and whomever did it, did a great job. I edited the demo and it works well with pictures.
我想说这个功能做得很好，无论是谁做的，都做得很好。我编辑了演示，它适用于图片。
<div id="picOne">
<img id="picOne" src="http://www.phphq.net/demos/phAlbum/album/Windows%20Wallpapers/Missing/Waterfall.jpg"/></div>
<div id="picTwo">
<img id="picTwo" src="http://newevolutiondesigns.com/images/freebies/colorful-background-21.jpg"/></div>
<div id="picTree">
<img id="picTree" src="http://www.phphq.net/demos/phAlbum/album/Windows%20Wallpapers/Missing/Waterfall.jpg"/></div>
<div id="picFour">
<img id="picFour" src="http://www.photoinpixel.com/mypicture/amazing-background-wallpapers.jpg"/></div>
Function
功能
var $elements = $('#picOne, #picTwo, #picTree, #picFour');
function anim_loop(index) {
$elements.eq(index).fadeIn(1000, function() {
var $self = $(this);
setTimeout(function() {
$self.fadeOut(1000);
anim_loop((index + 1) % $elements.length);
}, 3000);
}); }
anim_loop(0); // start with the first element
