Оптимизировать функции jQuery случайного порядка - PullRequest
Новая
       16

Оптимизировать функции jQuery случайного порядка

3 голосов
/ 02 марта 2012

Погружаясь в мир случайной сортировки, я испытываю затруднения при объединении некоторых функций, чтобы быть максимально эффективными. Все работает правильно, но у меня такое чувство, что я делаю это новичком , потому что я построил его с помощью двух функций, которые я нашел здесь в Переполнении стека, которые я затем изменил, а затем Франкенштейн вместе.

Мне бы очень хотелось, чтобы вы посоветовали любые способы упорядочения кода для повышения эффективности и устранения избыточности.

Эта функция занимает 10 делений, упорядочивает их в случайном порядке,затем этот случайный порядок исчезает на странице один за другим в дополнительном случайном порядке.Эффект аккуратный, посмотрите здесь: http://jsfiddle.net/danielredwood/MgFj2/

Большое спасибо за вашу помощь!

__ Инициализируйте функцию на странице 

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

__ Создать массив для затуханияorder 

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

Ответы [ 3 ]

1 голос
/ 02 марта 2012

Я вижу одну оптимизацию.Вместо случайного выбора числа, а затем проверки, находится ли оно в 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;
}
0 голосов
/ 02 марта 2012

Я добавлю еще один ответ для забавы ... Вы можете сделать это с довольно минимальным количеством 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/

Возможно, вы могли бы еще упростить это.

0 голосов
/ 02 марта 2012

Я использовал алгоритм «наизнанку» для этого типа вещей.Вот моя реализация: 

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

...