JavaScript setTimeout () reduz a velocidade sob carga pesada

Question

Eu criei um script que desbota a cor de um elemento de fundo. Eu uso setTimeout () para fazer uma mudança incremental para a cor a cada 5 ms. O script funciona muito bem se eu só estou desaparecendo a cor de uma coisa fundo de cada vez, mas se eu tenho, digamos, 50 elementos Estou toda desvanecimento de uma vez, a velocidade é muito mais lento do que 5 ms por causa de tudo o setTimeout concomitante () s rodando ao mesmo tempo. Um fade que normalmente deve ser executado em 1 segundo, por exemplo, pode demorar até 30 segundos se eu estou desaparecendo 50 elementos ao mesmo tempo.

Alguma idéia de como posso superar isso?

Aqui está o script no caso de alguém tem um ideias:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
        = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

É usado como este:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);

Answer 1

Aqui está um artigo do Google, onde o autor discute seu trabalho em temporizadores para Gmail. Eles descobriram que ter um único temporizador de alta freqüência foi mais rápido do que usar vários temporizadores se tivessem uso pesado e rápido timer.

Você poderia ter um temporizador que dispara a cada 5 ms, e adicionar todos os seus elementos que precisam ser enfraquecido para uma estrutura de dados que rastreia onde eles estão no processo de desbotamento. Em seguida, seu um temporizador pode olhar através dessa lista e executar a próxima desvanecimento para cada elemento de cada vez que é acionado.

Por outro lado, você já tentou usar uma biblioteca como Mootools ou JQuery em vez de rolar seus próprios estrutura de animação? Seus desenvolvedores colocaram um monte de trabalho para otimizar esses tipos de operações.

Answer 2

Em primeiro lugar o seu script não leva em conta que o mínimo de tempo limite é geralmente 10-15ms dependendo de um browser. Você pode ver meu post sobre este tema . Dentro de você encontrará uma mesa para browsers populares e um link para o programa que medidas que, para que possa verificar a alegação de si mesmo. Lamento dizer, mas iterações a cada 5ms é uma ilusão.

Em segundo lugar, os temporizadores não são interrupções. Não há mágica neles - eles não podem interromper o que está sendo executado no navegador e executar sua carga. Em vez disso, vão ser adiada até que as executam acabamentos código eo navegador recebe de volta o controle ea capacidade de executar temporizadores. Desaparecendo 50 elementos levam tempo, e eu aposto que ele é mais do que 5ms, especialmente se você levar em conta todo o modelo diferido do navegador:. Atualizar DOM, eo navegador irá atualizar a sua representação visual ... em algum ponto no tempo

Quero terminar com uma nota positiva:

• Em vez de desaparecendo 50 elementos individuais, tente agrupá-los e desaparecer o seu pai - que pode ser mais rápido
.
• Seja mais criativo na interface do usuário. Tente chegar a uma solução, que não requer desaparecendo uma série de elementos independentes ao mesmo tempo.
• Sempre verifique se seus pressupostos fundo estão corretas antes de projetar em torno deles.
• Se você puder, tentar atingir os navegadores modernos. Da minha experiência pessoal Google Chrome é muito bom com temporizadores, e seu motor JavaScript (V8) é extremamente rápido.

Answer 3

Além das outras respostas, aqui está um excelente artigo de John Resig sobre temporizadores: http://ejohn.org/blog/how-javascript-timers-work/