javascript - 简化随机顺序的 jQuery 函数

标签 javascript jquery css random fade

冒险进入随机排序的世界,但在组合某些函数以尽可能高效时遇到了困难。 一切正常,但我觉得我正在以一种新手的方式去做,因为我用我在 Stack Overflow 上找到的两个函数构建了它,我修改了这些函数,然后将它们合并在一起。 p>

如果我可以简化代码以提高效率并消除冗余,我希望得到您的建议。

此函数需要 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);
    });
}

最佳答案

我看到了一项优化。不是随机选择一个数字,然后检查它是否在 o 中,而是将可能的值 (a) 组成一个数组,然后 splice() 随机抽取一个并将其附加到 o。这种方式总是需要 x 步。另一种方法可能需要两倍以上的时间,尤其是当 o 几乎已满时,您很有可能生成一个已经在 o 中的数字,尤其是当x 增加。

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;
}

http://jsfiddle.net/8Jy8T/

另一种方法是遍历数组并将条目与另一个随机条目交换:

function introfade(x) {
    var o = [];
    for(var i=0; i<x; i++) {
         o.push(i);           
    }
    for(var i=0; i<x; i++) {
        var n = Math.floor(Math.random()*i);
        var tmp = o[n];
        o[n] = o[i];
        o[i] = tmp;      
    }

    return o;
}

关于javascript - 简化随机顺序的 jQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9523820/

相关文章:

css - 不良 Assets Heroku 链接

javascript - 使用 javascript 或正则表达式从值中分割数字和字符串

javascript - 为什么执行串联后不调用complete?

Javascript:重命名内置函数

JavaScript - 创建一个未排序的数组,其中包含重复元素和唯一元素的总和

jquery - 如何在重复序列之前重置 css

javascript - 模拟元素的点击

javascript - 语法错误 : Unexpected identifier importing React (Javascript)

html - 如何在 Bootstrap div 中制作一个居中的响应式 CSS 圆圈?

html - 将下拉箭头移动到链接元素的右侧