ランダムオーダーのjQuery関数を効率化する

Question

ランダムソートの世界に参入し、できるだけ効率的であるようにいくつかの関数を組み合わせることに問題があります。 すべてが正しく動作しますが、私は初心者のような方法でそれについて考えています私はスタックオーバーフローで私がここで見つけた2つの関数を使ってそれを構築したので、私はFrankensteinedを一緒に修正しました。

私はコードを合理化して効率を上げ、冗長性を取り除く方法についてアドバイスをいただきたいと思います。

この関数は10divsをとり、それらをランダムな順序に並べ替え、次にそのランダムな順序をランダムな順序でページの次々にフェードします。効果はきちんとしています。こちらをご覧ください：http://jsfiddle.net/danielredwood/MgFj2/

ありがとうございました！

__ページ

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

上 初期化機能__Rearrangeのdivを

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

フェード順の配列を作成し、私は1つの最適化を参照してください

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

私は、「インサイドアウト」アルゴリズムを使用してきましたこのタイプのもの。ここに私の実装です。これを使用して

/** 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 2

でそれらをフェード__。数字をランダムに選択して、それがoであるかどうかを調べるのではなく、可能な値の配列（a）を作成し、次にsplice()をランダムに1つ取り出して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; 
} 

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

これはすべてのことです。これは若干異なります。つまり、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/

あなたはおそらくこれをさらに簡素化することができます。