JQuery FadeIn и FADEOUT занимает 50% процессора

Question

У меня есть 135 HTML элементы, которые я хочу быть утрачен в и случайным образом, так что я написал этот код для него:

setInterval(function() { 
    ggg = Math.floor(Math.random() * (50 - 1 + 1) + 1); 
    $("#f" + ggg).fadeIn(500, function() { }); 
    $("#f" + ggg).fadeOut(500); 
}, 300); 


setInterval(function() { 
    ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50); 
    $("#f" + ggg).fadeIn(500, function() { }); 
    $("#f" + ggg).fadeOut(500); 
}, 300); 

setInterval(function() { 
    ggg = Math.floor(Math.random() * (135 - 100 + 1) + 100); 
    $("#f" + ggg).fadeIn(500, function() { }); 
    $("#f" + ggg).fadeOut(500); 
}, 300); 

Но проблема в том, что он принимает 50 процентов моего i7 на Macbook Pro, хотя на ноутбуке Windows нет проблем. Может ли кто-нибудь переписать код для лучшей производительности?

Answer 1

animate = function() { 
    ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50); 
    $("#f" + ggg).fadeIn(500, function() { 
    $("#f" + ggg).fadeOut(500,animate); 
    }) 
} 
animate(); 

Чтобы отложить, сделать эту модификацию:

$("#f" + ggg).delay(300).fadeOut(500,animate); 

Вы также мог бы использовать .stop(true,true) для очистки очереди перед началом другой анимации.

Answer 2

$("#f" + ggg).animate({ opacity: 0 }, 500, function() { 
    $("#f" + ggg).animate({ opacity: 1 }, 500) 
}); 

Возможно, вы получаете более высокую скорость с анимацией, но idk. Это не редкость для того, чтобы javascript даже замедлял работу i7 (возможно, производительность, связанная с браузером?)

Answer 3

В дополнение к тому, чтобы начинать 1-секундную анимацию каждые 300 мс (что мало смысла), также кажется, что вы ожидаете fadeIn и fadeOut функции для синхронного запуска.

Этот код:

$("#f" + ggg).fadeIn(500, function() { }); 
$("#f" + ggg).fadeOut(500); 

Начнет полсекунды нарастающим в, затем немедленно перезаписать его с полусекундой затихания. Я даже не знаю, что это делает.

Это пустая функция вы передаете fadeIn является обратный вызов делать, когда это полный ... тот, где вы хотите поставить fadeOut:

$("#f" + ggg).fadeIn(500, function() { 
    $("#f" + ggg).fadeOut(500); 
}); 

Answer 4

Мое предположение было бы, что причиной является укладывание анимационные вызовы.

Вы устанавливаете интервал, который вызывает функцию каждые 300 миллисекунд, которые запускают 2 анимации продолжительностью 500 + 500 миллисекунд.

Также вы можете сделать все 3 вызова анимации в одной функции. А может быть, может быть лучший способ выбрать ваш объект, который вы хотите оживить? Случайность может быть не самым эффективным способом.

Может быть, это, возможно, уже сделать трюк (непроверенный)

function animateStuff(){ 
    ggg = Math.floor(Math.random() * (50 -1 + 1) + 1); 
    $("#f" + ggg).fadeOut(500, function(){ 
     $(this).fadeIn(500); 
    }); 

    ggg = Math.floor(Math.random() * (100 -1 + 1) + 1); 
    $("#f" + ggg).fadeOut(500, function(){ 
     $(this).fadeIn(500); 
    }); 

    ggg = Math.floor(Math.random() * (135 -1 + 1) + 1); 
    $("#f" + ggg).fadeOut(500, function(){ 
     $(this).fadeIn(500); 
    }); 
} 

setInterval(function(){ 
    animateStuff(); 
}, 1000); 

Answer 5

Дайте элементы класс, кэшировать элементы, рандомизации вашего объекта JQuery и затем исчезают их в и.

var els = $(".random"); 
var $random = shuffleArray(els); 

$random.each(function() { 
    var max = 4000; 
    var min = 1000; 
    var duration = Math.floor(Math.random() * (max - min + 1) + min); 
    $(this).delay(duration).fadeTo(1000, 1, function() { 
     $(this).delay(duration).fadeTo(1000, 0); 
    }); 
}); 

Шаркая функция найдено here

/** 
* Randomize array element order in-place. 
* Using Fisher-Yates shuffle algorithm. 
*/ 
function shuffleArray(array) { 
    for (var i = array.length - 1; i > 0; i--) { 
     var j = Math.floor(Math.random() * (i + 1)); 
     var temp = array[i]; 
     array[i] = array[j]; 
     array[j] = temp; 
    } 
    return array; 
} 

скрипку here