J'ai besoin de charger une image de manière synchrone, c'est-à-dire suspendre l'exécution de JavaScript jusqu'à ce que l'image soit chargée. Etant donné que l'image.onload est asynchrone, la fonction principale retournera avant que l'image ne soit chargée.
J'utilise de la toile, et si la fonction principale retourne avant la charge de l'image et donc dessinée, d'autres choses dans la toile seront tirées. avant l'image. Cela ne fonctionne pas car l'ordre de dessin sur une toile est très important! P>
Voici ce que j'ai fait: p>
var img = new Image();
img.onload = function() {
//image drawing code here
}
img.src = "blahblahblah";
//function returns here, and other drawing code happens before image is drawn
3 Réponses :
Y a-t-il un moyen de faire cela de manière synchrone, ou d'attendre jusqu'à la L'image est entièrement chargée avant de retourner de la fonction?
non. Afaik, la seule chose qui peut être faite de manière synchrone dans JavaScript est un appel XHR synchrone.
Dans tous les cas, ce que vous devriez vraiment faire est de mettre en place une héritière de rappels qui mettent en œuvre vos dépendances.
J'ai une très grande boucle faire beaucoup de dessin sur la toile, et il est difficile de faire une pause de boucle pendant que l'image est en cours de chargement, ce dont j'ai besoin. Si j'avais utilisé l'image.Onload Callback, l'image serait dessinée après autre chose dans la boucle. Cela provoque l'apparition de l'image devant des choses qu'il devrait être derrière.
Dans la fonction qui démarre le chargement de l'image, comme la dernière chose, utilisez seinterval pour démarrer une fonction qui se ferme sur un objet qui est également fermé par votre image.Onload Rappel. La fonction "intervalle" ne doit rien faire jusqu'à ce qu'un drapeau spécifique ait été défini. Ce drapeau doit être défini par votre image.Onload rappel. Lorsqu'il trouve le jeu de drapeaux, la fonction "Intervalle" doit appeler la prochaine pièce de code; le code qui dessine sur l'image "fond".
Vous Je ne peux pas faire une pause, vous devez débarrasser cette idée de votre esprit.
D'ACCORD. Alors, comment j'appelle la prochaine pièce de code, s'il s'agit juste de la prochaine itération d'une boucle?
Vous ne pouvez pas le garder comme une boucle en ligne. Vous devez convertir votre code pour être asynchrone. Un modèle de boucle serait une récursion. Vous pouvez faire du temps les appels vers la fonction en appelant Settimeout (moi-même, le délai d'attente) comme dernière chose dans la fonction récursive (vous permettant également de passer des limites de pile à pas).
Je ne pense pas que vous puissiez le faire de manière asynchrone et penser que ce serait très risqué si le chemin du fichier image est faux. Vous devez considérer que le téléchargement est un rappel, qui sera appelé lorsque l'image est entièrement chargée.
Vous devez donc exécuter tout le code de dessin dans la fonction de rappel.
ne peut-il pas être résolu en refactoring?
envelopper quel que soit le code que vous devez exécuter après la charge d'image dans une fonction appelée par le rappel (ou faites cette fonction le callbak).
Je vois que vous dites que si la fonction principale retourne, un autre code s'exécutera. Pouvez-vous envelopper ça aussi? Pouvez-vous retarder son exécution ou le rendre dépendant de cet événement surchargé ou de cet événement?
Vous pouvez même charger de manière dynamique la source de l'autre code JavaScript dans l'image surcharger.
Peut-être, en théorie. En pratique, pas vraiment. Dessin sur une toile est, par nature, une séquence d'étapes commandées qui doivent se produire l'un après l'autre. Vous pouvez forcer cela pour arriver avec un escalier descendant de rappels, mais ... Vraiment ... il est tout simplement sucky pour avoir des étapes asynchrones dans un processus très synchrone. Une étape de la chaîne de montage travaillant hors du temps avec tout le reste, causant des confitures ...