const image = document.querySelector('.images'); const createImage = (imgPath, seconds) => { return new Promise(function (resolve, reject) { if (imgPath) { const img = document.createElement('img'); setTimeout(() => { img.src = imgPath; image.append(img); resolve(img); }, 1000 * seconds); } else reject('ERROR. REJECTED'); }); }; let currentImage; createImage('./img/img-1.jpg', 1) .then(img => { console.log(img); // img.style.display = 'none'; console.log('1 successful'); // img.style.display = 'none'; return createImage('./img/img-2.jpg', 2); }) .then(img => { console.log(img); img.style.display = 'none'; console.log('2 successful'); return createImage('./img/img-3.jpg', 3); }) .then(img => { img.style.display = 'none'; console.log('3 successful'); return img; });Estoy tratando de mostrar la primera imagen y luego ocultarla para mostrar una segunda imagen después de 2 segundos. Luego, oculta la segunda imagen para mostrar una tercera imagen.
Cuando uso resolve(imp) dentro de la función setTimeout, devuelve <img src="./img/img-1.jpg> . Cuando resolve(img) se coloca fuera de setTimeout, devuelve solo <img> . ¿Por qué ¿cada caso devuelve valores diferentes? porque en JS, aún podemos usar valores que se llamaron dentro de la función incluso después de que se ejecutaron y desaparecieron.
setTimeout(() => { img.src = imgPath; image.append(img); }, 1000 * seconds); resolve(img);La causa raíz de la diferencia es: ¿agrega primero el src y luego inicia sesión, o primero inicia sesión y luego configura el src . En ambos casos, el navegador registrará el elemento tal como aparece en el momento de la declaración de registro (al menos en Chrome; diferentes navegadores pueden registrar de forma ligeramente diferente). Si el elemento tiene un src , el registro lo refleja. Si el elemento aún no tiene src , el registro no tiene src.
Esto se puede demostrar sin involucrar promesas en absoluto:
const img = document.createElement('img'); console.log(img); img.src = 'example'; const img = document.createElement('img'); img.src = 'example'; console.log(img); Entonces, vuelva a agregar las promesas: si resuelve la promesa antes de agregar un src , la ejecución del código se mueve a .then callback y lo cierra, sin src. Un segundo después, se agrega el src , demasiado tarde para incluirlo en el registro. Si, en cambio, espera hasta que se haya agregado el src y luego resuelve la promesa, entonces el código en la devolución de llamada .then puede cerrar la sesión del src .