Estoy trabajando en un proyecto en el que uso fabric.js
Cuando ejecuto este código y el índice de registro de la consola en diferentes puntos, vi que el ciclo principal se ejecuta y luego el índice de registros de la pieza de reemplazo de la imagen e incluso más tarde se realiza ajax.
pseudocódigo
for loop { console.log("start"); // To go through the image addresses array retrieved from database for loop { console.log("Inside Second loop"); // To Go through placeholder images or layer of images // There can be multiple images on canvas to replace // replace Image happens here console.log("BeforeImageChange"); imgToChange.setSrc(imgAddressFromDB){ console.log("AfterImageChange"); } } function saveCanvas(){ //function to save canvas as a Image done through ajax to php console.log("AfterSaving"); } saveCanvas(); console.log("End"); }La salida de console.log es como
"start" "Inside Second loop" "BeforeImageChange" "End" "AfterImageChange" "AfterSaving"¿Cómo puedo hacer que AfterImageChange ocurra justo después de BeforeImageChange y Saving ocurra antes de que finalice el ciclo?
Soy nuevo en javascript, intenté aprender sobre métodos asincrónicos, pero no tienen sentido para mí si son útiles en mi caso. Si necesitas más información comenta abajo. Gracias
Intente llamar a saveCanvas() dentro del método setSrc , de esta manera se llamará a saveCanvas después de llamar a la consola AfterSaving.
Necesitas reorganizar tu código. Ya sabe la respuesta porque sabe cómo se comporta el código, pero quizás no esté familiarizado con las técnicas. Primero necesitas hacer esto:
for loop { console.log("start"); // To go through the image address retrieved from database for loop { console.log("Inside Second loop"); // To Go through placeholder images or layer of images // replace Image happens here console.log("BeforeImageChange"); imgToChange.setSrc(imgAddressFromDB){ console.log("AfterImageChange"); // You already know that code inside here // gets executed last function saveCanvas(){ //function to save canvas as a Image done through ajax to php console.log("AfterSaving"); } saveCanvas(); console.log("End"); } } } Pero supongo que no desea saveCanvas() en cada iteración del bucle. Por lo tanto, debe ejecutarlo solo al completar el último setSrc() :
for loop { console.log("start"); // To go through the image address retrieved from database let setSrcCount = figureOutHowManyTimesTheForLoopBelowLoops(); for loop { console.log("Inside Second loop"); console.log("BeforeImageChange"); imgToChange.setSrc(imgAddressFromDB){ console.log("AfterImageChange"); setSrcCount --; if (setSrcCount === 0) { function saveCanvas(){ //function to save canvas as a Image done through ajax to php console.log("AfterSaving"); } saveCanvas(); console.log("End"); } } } }El código se puede hacer más legible si usa Promesas :
function setSrc(imgAddress) { return new Promise((ok,err) => { imgToChange.setSrc(imgAddress,function () { ok(); }); }); } async function functionContainingLoops() { for loop { console.log("start"); // To go through the image address retrieved from database for loop { console.log("Inside Second loop"); // To Go through placeholder images or layer of images // replace Image happens here console.log("BeforeImageChange"); await setSrc(imgAddressFromDB); console.log("AfterImageChange"); } function saveCanvas(){ //function to save canvas as a Image done through ajax to php console.log("AfterSaving"); } saveCanvas(); console.log("End"); } } ContainingLoops()