2009-10-20 5 views
0

Ceci est un exemple simplifié, pour s'assurer qu'il n'y a pas de fonctions d'évanouissement/animation asynchrones impliquées.Veuillez attendre la superposition modale avant d'attendre une fonction avec une lourde charge de travail sans setTimeout()?

Je veux, que l'arrière-plan soit rouge lorsque la fonction avec la lourde charge de travail fonctionne et devient noir, quand il est prêt. Ce qui se passe réellement, c'est que la plupart du temps l'arrière-plan passera directement au noir, après que la fonction soit prête. Vous ne verrez pas de fond rouge, même si vous attendez que 'terminé' soit alerté.

Existe-t-il une meilleure solution, puis en quelques millisecondes avec setTimeout, de sorte que le changement d'arrière-plan passe au rouge. Appeler work() produit directement le problème.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>Test</title> 
<script type='text/javascript'> 
function work() 
{ 
    var i, a; 
    a = []; 
    for(i = 0; i < 250000; i++) 
    { 
     a.push(Math.random()); 
    } 
    a.sort(); 
    document.getElementsByTagName('body')[0].style.background = '#000000'; 
    alert('done'); 
    return true; 
} 

window.onload = function() { 
    document.getElementsByTagName('body')[0].style.background = '#ff0000'; 
    //work(); 
    setTimeout(work, 100); 

}; 
</script> 
</head> 
<body> 
<h1>Test</h1> 
</body> 
</html> 
+0

'setTimeout 'fonctionne parfaitement dans ce cas. Y a-t-il une raison pour laquelle vous êtes opposé à l'utiliser? –

Répondre

0

La « pop-up modal » est là pour sauver le verrouillage du navigateur et faire l'utilisateur vraiment bouleversé le script de complètement (pour toujours). Cette protection n'est pas détectable à partir du code JS et interrompt l'exécution JS qui suit un modèle synchrone. C'est pour vous sauver, écrivez le code qui ne bloque pas! En fait, il est assez facile de configurer la plupart des calculs pour pouvoir les réutiliser et les éliminer en utilisant des thunks/fermetures ou des files d'attente.

Quoi qu'il en soit ... dans mon expérience, un "délai" de 1ms est suffisant dans FF3.5 (Win) et IE6-8 pour mettre à jour le CSS (le délai réel sera probablement plus de 1ms). Cela force la "mise en file d'attente" de l'événement post à l'intérieur du modèle synchrone qui, au moins dans les cas ci-dessus, permet aux styles CSS d'être appliqués avant que l'exécution de JS ne se poursuive. Je pense que Prototype.js utilise une valeur de 0ms pour sa fonction "delay", mais je ne suis pas si courageux.

En outre, « document.body » :-)

(Je suis tout à fait sûr qu'il n'y a pas « meilleur » façon, bien que toute cette approche sent comme un marché aux poissons en plein air.)

+0

Merci pour votre réponse. Mais vous ne connaissez pas ma configuration. C'est une considération entre ne rien dire, demander de la patience et le montant d'argent dont vous avez besoin pour programmer une meilleure solution. L'argent n'a pas d'odeur. – Felix

+0

N'hésitez pas à prendre ou à laisser tomber les pièces opiniâtres: * le modèle synchrone de javascript et la relation qu'il a avec le navigateur est toujours valable *. (L'argent a effectivement une odeur, essayez de renifler différentes pièces de monnaie, puis une note ou deux, et les marchés de poissons ouverts ne sont pas nécessairement une mauvaise odeur, juste une odeur de poisson - et ils sont un bon endroit pour obtenir des fruits de mer frais :) –

Questions connexes