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);
        }

我正在尝试为MergeSort制作可视化。MergeSort函数将较大的数组划分为较小的数组。然后，通过merge函数将这些较小的数组排序到mergearr数组中。然后，MergeDraw绘制所做的更改。我希望在绘制新的Mergedarr之前，在绘制完成后有一个小的停顿。我尝试使用Async Await来执行此操作，但这不起作用。有没有更好的方法来代替使用异步等待？

顺晟科技：