function sleep(ms) { // new code: checkout a video about promises return new Promise(resolve => setTimeout(resolve, ms)); } async function mergeDraw(anArray,startPoint){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); j = startPoint; for(num = 0; num < anArray.length; num++){ anArray[num][1] = j; ctx.lineWidth = 3.2 ; ctx.strokeStyle = 'seagreen' ctx.beginPath(); ctx.moveTo(j, 0); ctx.lineTo(j, 800); ctx.stroke(); ctx.lineWidth = 3; ctx.strokeStyle = 'black' ctx.beginPath(); ctx.moveTo(j, 0); ctx.lineTo(j, anArray[num][0]); ctx.stroke(); j+=8; } await sleep(10); } function merger(arr1, arr2) { let i = 0,j = 0,mergedArr = []; while (i < arr1.length && j < arr2.length) { if (arr1[i][0] > arr2[j][0]){ mergedArr.push(arr2[j]); j++; } else{ mergedArr.push(arr1[i]); i++; } } while (i < arr1.length) { mergedArr.push(arr1[i]); i++; } while (j < arr2.length) { mergedArr.push(arr2[j]); j++; } var lowest = mergedArr[0][1]; for( num = 1; num < mergedArr.length; num++){ if(mergedArr[num][1] < lowest){ lowest = mergedArr[num][1]; } } mergeDraw(mergedArr, lowest); return mergedArr; } function mergeSort(array) { //Array of length 1 is sorted so we return the same array back if (array.length == 1) return array; //Break down the array to half from middle into left and right let middle = Math.floor(array.length / 2); let left = mergeSort(array.slice(0, middle)); let right = mergeSort(array.slice(middle)); //Return the merged sorted array return merger(left, right); }

Estoy tratando de hacer una visualización para mergeSort. Mi función mergeSort divide mi matriz más grande en matrices más pequeñas. Estas matrices más pequeñas luego se ordenan en la matriz mergeArr mediante la función de fusión. El mergeDraw luego dibuja los cambios realizados. Quiero que haya una pequeña pausa después de que se haya hecho el dibujo antes de que se dibuje un nuevo mergedArr. Traté de hacer esto usando async await pero esto no funciona. ¿Hay una mejor manera de hacer esto en lugar de usar async await?