Question

我创建了一个随机效果，使得divs变为shuffle（在.team1中）现在我有4个，有没有办法让我可以使用.each函数或更好的东西，所以我不会复制这个代码4次？

$(document).ready(function(){

    var randomNumber = Math.floor(Math.random() * 3000);

    var interval = setInterval(function(){
        $('.team1 div:first').insertAfter( $('.team1 div:last') );
    }, 100);

    setTimeout(function(){
        clearInterval(interval);
    }, randomNumber);

});

HTML：

<div class="team1 size">
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>
<div class="team2 size">
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>
<div class="team3 size">    
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>
<div class="team4 size">      
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>

CSS：

.size { float:left; width:100px; height:100px; overflow:hidden; margin:0 4px; }
.brown  { background:brown;    width:100px; height:100px;  }
 .purple { background:purple;  width:100px; height:100px;  }
.orange { background:orange;   width:100px; height:100px;  }

Answer 1

在这里，我只是从1开始迭代你拥有的团队数量。

然后创建间隔对象并使用setTimeout取消它。

$(document).ready(function(){

    var intervals = [];

    for (var i = 1; i < 5; i++) {
        (function (i) {
            var randomNumber = Math.floor(Math.random() * 3000);

            var interval = setInterval(function(){
                $('.team' + i + ' div:first')
                    .insertAfter( $('.team' + i + ' div:last') );
            }, 100); 

            intervals.push({
                randomNumber: randomNumber,
                interval: interval
            });
        })(i);
    }   

    for (var i = 0; i < intervals.length; i++) {   
        (function (intervals, i) {
            var intervalObj =  intervals[i];
            setTimeout(function(){
                clearInterval(intervalObj.interval);
            }, intervalObj.randomNumber);   
        })(intervals, i); 
    }
});

当我创建jQuery将评估的字符串时，我只传入迭代编号。

我将所有这些间隔存储在一个数组中，并随机生成取消时间。

然后我只是迭代这个数组，启动setTimeout个对象，以便我们清理所有的间隔。

如果你想要随机开始时间，增加＆＃34;随机性＆＃34;然后你可以这样做：

$(document).ready(function(){

    var intervals = [];

    for (var i = 1; i < 5; i++) {
        (function (i, intervals) {
            var randomNumber = Math.floor(Math.random() * 3000);
            var randomStart = Math.floor(Math.random() * 1000);

            setTimeout(function () {
                var interval = setInterval(function(){
                    $('.team' + i + ' div:first')
                    .insertAfter( $('.team' + i + ' div:last') );
                }, 100); 

                //intervals.push({
                    //randomNumber: randomNumber,
                    //interval: interval
                //});

                setTimeout(function(){
                    clearInterval(interval);
                }, randomNumber);

            }, randomStart);

        })(i, intervals);
    }   

});

使用interval和setTimeout时要记住的关键是callback函数将在未来的某个时刻运行，所以如果你想要发生什么事情的话当他们全部完成后，您将需要异步库的帮助。

Answer 2

使用for循环和立即调用的函数：

for (var i = 1; i <= 4; i++) {
    (function (i) {
        var randomNumber = Math.floor(Math.random() * 3000);

        var interval = setInterval(function () {
            $('.team' + i + ' div:first').insertAfter($('.team' + i + ' div:last'));
        }, 100);

        setTimeout(function(){
            clearInterval(interval);
        }, randomNumber);
    })(i);
}

您需要立即调用的函数，以传递i方法的正确#setInterval()值。

至于随机化，一个非常简单的解决方案是定义一个新的jQuery函数（这个answer的学分）：

$.fn.random = function() {
    return this.eq(Math.floor(Math.random() * this.length));
}

然后你可以写下这个而不是原文：

$('.team' + i + ' div:first').insertAfter($('.team' + i + ' div').random());

这是Fiddle link。

随机divs每个setInterval

2 个答案: