Question

冒险进入随机排序的世界，并且难以将某些功能组合在一起尽可能高效。 一切正常，但我感觉我会以一种新手的方式开始，因为我使用我在Stack Overflow上找到的两个函数构建它，然后我一起修改了Frankensteined。

我非常喜欢您的建议，我可以通过任何方式简化代码以提高效率并消除冗余。

此函数需要10个div，将它们重新排列为随机顺序，然后以随机顺序将该随机顺序逐个淡入页面。效果很好，请在此处查看：http://jsfiddle.net/danielredwood/MgFj2/

非常感谢你的帮助！

__ 初始化页面上的功能

$(document).ready(function(){
    shuffle();
});

__ 为淡入淡出顺序创建数组

function introfade(x) {
    var o = [];
    for (var i = 0; i < x; i++) {
        var n = Math.floor(Math.random()*x);
        if ( $.inArray(n, o) > 0 ) {
            --i;
        } else {
            o.push(n);
        }
    }
    return o;
}

__重新排列div并在

中淡出它们

function shuffle() {
    var b       = $('.box'),
        arrange = $('<div>'),
        size    = b.size(),
        fade    = introfade(size);

    while (size >= 1) {
        var rand = Math.floor(Math.random() * size),
            temp = b.get(rand);

        arrange.append(temp);
        b = b.not(temp);
        size--;
    }

    $('.main').html(arrange.html());

    $('.box').each(function(i) {
        var c = $(this);
        setTimeout(function() {
            c.fadeTo(500, 1);
        }, fade[i]*150);
    });
}

Answer 1

我看到一个优化。不是随机选择一个数字然后检查它是否在o中，而是随机输出一个可能值（a），然后splice()一个数组，并将其追加到{ {1}}。这种方式总是需要o步。另一种方式可能需要两倍以上，特别是当x几乎已满时，您很有可能生成已在o中的数字，尤其是当o的大小增加时

http://jsfiddle.net/8Jy8T/

另一种方法是逐步执行数组并将条目与另一个随机条目交换：

function introfade(x) {
    var o = [];
    var a = [];
    for(var i=0; i<x; i++) {
         a.push(i);           
    }
    for(var i=x; i>0; i--) {
        var n = Math.floor(Math.random()*i);
        o.push(a.splice(n,1)[0]);           
    }

    return o;
}

Answer 2

我一直在使用“由内而外”的算法来处理这类事情。这是我的实施：

/** pushRand

    Insert a value into an array at a random index. The element 
    previously at that index will be pushed back onto the end. 

    @see http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_.22inside-out.22_algorithm

    @param {Array} array Array to insert into.
    @param {Mixed} value Value to insert.
    @param {Object} rng Optional RNG. Defaults to Math.
    @return {Number} The new length of the array.

*/
function pushRand (array, value, rng) {
    var j = (rng || Math).random() * (array.length + 1) | 0;
    array.push(array[j]);
    array[j] = value;
    return array.length;
}

使用它，您的代码可以简化一点：

// Create array for fade order

function introfade(x) {
    var o = [];
    while (x--) pushRand(o, x);
    return o;
}

// Rearrange divs and fade them in

function shuffle() {
    var b       = $('.box'),
        main    = $('.main')[0],
        arrange = $('<div>'),
        size    = b.size(),
        fade    = introfade(size),
        boxes   = [], 
        i;

    for (i = size; i--;) pushRand(boxes, b[i]);
    for (i = size; i--;) main.appendChild(boxes[i]);

    b.each(function(i) {
        var c = $(this);
        setTimeout(function() {
            c.fadeTo(500, 1);
        }, fade[i]*150);
    });
}

看看这里：http://jsfiddle.net/MgFj2/2/

Answer 3

我会在这里提出另一个答案以获得乐趣...你可以用相当少量的jQuery来做到这一点：

// Rearrange divs and fade them in
function shuffle() {
    var num = $('.box').length - 1;
    $('.box').each(function(i) {
        var rand = Math.floor(Math.random() * num);
        $(this).remove().insertAfter($('.box').eq(rand)).delay(i * 50).fadeTo(250, 1);
    });
}

// Initialize function
$(document).ready(function() {
    shuffle();
});

http://jsfiddle.net/gvjrr/

这就是整件事。这略有不同，因为它按顺序淡化div（但它们在页面周围移动）。如果你想继续随意淡化它们，你只需先将它们洗牌而不露出，然后随意洗牌并透露：

// Rearrange divs and fade them in
function shuffle() {
    var num = $('.box').length-1;

    $('.box').each(function(i) {
        var rand = Math.floor(Math.random() * num);
        $(this).remove().insertAfter($('.box').eq(rand));
    })

    $('.box').each(function(i) {
        var rand = Math.floor(Math.random() * num);
        $(this).remove().insertAfter($('.box').eq(rand)).delay(i * 50).fadeTo(250, 1);
    });
}

// Initialize function
$(document).ready(function() {
    shuffle();

});

http://jsfiddle.net/AapCP/1/

你可以进一步简化这一点。

简化随机顺序jQuery函数

3 个答案: