我将如何一遍又一遍地运行此代码?

Question

我有这组淡入淡出的代码。 我需要的是一遍又一遍地重复它，只要页面打开，就无休止地重复。

$(document).ready(function() {
$('.one').fadeTo(500, 1);
$('.one').fadeOut(500, 0, function(){
$('.two').fadeTo(500, 1);
$('.two').fadeOut(500, 0, function(){
$('.three').fadeTo(500, 1);
$('.three').fadeOut(500, 0, function(){
$('.four').fadeTo(500, 1);
$('.four').fadeOut(500, 0, function(){
$('.five').fadeTo(500, 1);
$('.five').fadeOut(500, 0, function(){
$('.six').fadeTo(500, 1);
$('.six').fadeOut(500,0);
}); 
});
});
});
});   
});
$(document).ready(main); 

我想到了 setInterval，它可以工作，但整个循环长达 60 秒，并且 setInterval 不是从 0 开始，而是在设置的时间开始。

在这种情况下，我必须将间隔设置为 60000，然后在循环开始之前等待整整一分钟。

有没有更简单的方法可以再次启动函数？ 或者有没有办法从 0 开始 setInterval？

Answer 1

您可以简单地从$document.ready()中提取匿名函数。然后，您将在$document.ready()中调用一次，然后使用.setInterval()每 60 秒一次又一次地调用它，这就是您想要的。

我提供了一个概念证明，每 5 秒记录一次到控制台，作为您的起点：

$(document).ready(function(loop) {
loopFunction();
window.setInterval(loopFunction, 5000);
});
var loopFunction = function(loop) {
console.log('Runs every 5 seconds');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

这是一个简单的想法，它采用一系列类名。使用选择器抓取元素会很容易(也许更好(，但这应该使其易于使用。现在你从数组中抓取第一个元素，使用它来淡化，然后将其放回数组的末尾。它应该继续下去。

var fades = ['.one', '.two', '.three', '.four', '.five', '.six']
function fade_el() {
//grad element from array
let el_index = fades.shift()
// call fades 
$(el_index).fadeTo(500, 1)
$(el_index).fadeOut(500, 0, function() {
// put element back at end of array
fades.push(el_index)
// recurse 
fade_el()
})
}
$(document).ready(fade_el)

div {
width: 100px;
height: 100px;
background-color: grey;
margin: 10px;
display: inline-block;
opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>

Answer 3

您可以尝试使用递归函数来实现此目的。

function repeatFadeEffect(){
$('.one').fadeTo(500, 1);
$('.one').fadeOut(500, 0, function(){
$('.two').fadeTo(500, 1);
$('.two').fadeOut(500, 0, function(){
$('.three').fadeTo(500, 1);
$('.three').fadeOut(500, 0, function(){
$('.four').fadeTo(500, 1);
$('.four').fadeOut(500, 0, function(){
$('.five').fadeTo(500, 1);
$('.five').fadeOut(500, 0, function(){
$('.six').fadeTo(500, 1);
$('.six').fadeOut(500,0, function(){
// call your function again here or from where you want the process to restart
repeatFadeEffect();
});
}); 
});
});
});
});   
});
}

$(document).ready(function(){
// call this function once to start the repeat effect.
repeatFadeEffect();
main();
}); 

不清楚是否要重复整个序列，但使用递归函数调用应该会给你所需的结果。

我建议重构你的代码，以摆脱你在那里进行的函数开始:)

Answer 4

递归函数可能是最好的方法。将各种类拉到一个数组中，并将淡入淡出函数作为回调传递给 fadeOut，下一个索引作为参数：

// Array of classes
var classes = ['one', 'two', 'three', 'four', 'five', 'six'];
// Fading function, takes the array index for the next class
function fadeFunc(classNum) {
// Grab the element
var elem = $('.' + classes[classNum]);
// Fade in
elem.fadeTo(500, 1, function () {
// Fade out, passing fadeFunc the next index
elem.fadeOut(500, 0, function () {
fadeFunc((classNum + 1) % 6);
});
});
};
// Start with the first index
$(document).ready(function () {
fadeFunc(0);
});

这是一个工作示例。