Digamos que tengo el siguiente código JavaScript muy simple:

 function addPicture(name){ var src = document.getElementById("mainConsole"); var img = new Image(); img.onload=function() { img.id=name; src.appendChild(img); } img.src = name; } function clearpicture(name){ var elem = document.getElementById(name); elem.remove(); }

Esto parece funcionar bien siempre que estas funciones no estén aisladas en rápida sucesión. Hacer que el usuario haga clic en un enlace:

 <a href="javascript:void(0);" onclick="clearpicture('1.jpg');">test1</a>

elimina la imagen como cabría esperar. Sin embargo, si solo uso este código:

 addPicture("1.jpg"); clearpicture(1.jpg");

Obtengo: TypeError: elem is null . ¡Puedo resolver este problema con una promesa!

 let p = new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) console.log("now"); }).then(function(result) { clearpicture("1.jpg"); });

Todo funciona normalmente (después del retraso especificado, por supuesto). Luego, traté de hacer que la promesa esperara en la subrutina addpicture en lugar de setTimeout:

 let p = new Promise(function(resolve, reject) { addPicture("1.jpg","1",100,0,0); resolve(1); }).then(function(result) { clearpicture("1.jpg"); console.log("picture removed"); });

Me sale el mismo error null . En mi aplicación real, tengo tiempo para que se cargue la imagen, pero si trato de eliminar una serie de imágenes a la vez:

 clearpicture("1.jpg"); clearpicture("2.jpg"); clearpicture("3.jpg");

No se elimina nada, aunque tenga en cuenta que habría algún retraso ya que mis dos subrutinas realizan algún procesamiento antes de agregar o eliminar algo.

¿Cómo puedo hacer que el código javscript espere a que una imagen se cargue por completo o se elimine antes de que haga algo más?