Javascript * / | *--* */ WriteFacetBeging（流）； stream.write（“顶点”+行+“”+列+“”+像素值[行][列]*缩放+“\n”） stream.write（“顶点”+（行+1）++”+（列-1）+“+像素值[行+1][列-1]*比例+”\n”） stream.write（“顶点”+（行+1）+“+col+”+像素值[行+1][col]*比例+”\n”） writeFacetEnd（流）； /*左下角 *--* | / * */ WriteFacetBeging（流）； stream.write（“顶点”+行+“”+列+“”+像素值[行][列]*缩放+“\n”） stream.write（“顶点”+行+”+（列-1）+“+像素值[行][列-1]*比例+”\n”） stream.write（“顶点”+（行+1）++”+（列-1）+“+像素值[行+1][列-1]*比例+”\n”） writeFacetEnd（流）； } 如果（行+1

在当前执行周期结束之前，浏览器不会呈现更改。所以，即使您更新了元素的宽度，浏览器也会等待执行周期来呈现更改，而只有在整个循环完成后才会发生更改

您可以在这里实现两种不同类型的解决方案

在循环之间使用requestAnimationFrame

requestAnimationFrame

在渲染下一帧之前、渲染当前帧之后执行回调

    function processRow(row = 1) {
      for (let col = 1; col < src.cols; col+=2) {
        // Your code
        currentProgress += 4;
      }
      updateProgressBar(currentProgress/maxProgress);
      if (row < src.rows) {
        requestAnimationFrame(() => processRow(row + 2));
      }
    }

函数进程行（行=1）{
for（设col=1；colprocessRow（行+2））；
}
}

使用 由于您不依赖于DOM或对DOM进行任何更改来处理图像，所以在完成循环时，将整个计算部分移动到WebWorker并将消息发布到主线程

---

在主线程中，您可以侦听来自WebWorker的消息，并相应地更新进度栏

这是预期的行为。浏览器只有一个执行JS和呈现视图的线程。对DOM的更改将在所有JS执行后呈现到视图中，因此只有最后的更改才可见。

@font-face {font-family: "Orkney Light"; src: url('./fonts/orkney/Orkney\ Light.ttf')}
@font-face {font-family: "Orkney Medium"; src: url('./fonts/orkney/Orkney\ Medium.ttf')}
@font-face {font-family: "Orkney Bold"; src: url('./fonts/orkney/Orkney\ Bold.ttf')}

body {
   margin: 0;  
   height: 100%;
   overflow: hidden;
}

#progress-bar {
   width: 50vw;
   height: 5vh;
   background-color: black;
   border-radius: 5vw;
   position: relative
}
#progress-bar::before {
   content: "";
   width: calc(var(--width, 0) * 1%);
   position: absolute;
   left: 1vw;
   top: 1vh;
   bottom: 1vh;
   min-width: 0.1vw;
   max-width: calc(100% - 2vw);
   background-color: red;
   border-radius: 10000vw;
}
#img-for-analysis {
   margin-top: 100vh;
   opacity: 0;
   position: fixed;
}

/*
 * Progress bar
 */
const progressBar = document.getElementById('progress-bar')

/**
 * Returns the current width of the progress bar
 */
function getProgressBarWidth() {
  const computedStyle = getComputedStyle(progressBar)
  const width = parseFloat(computedStyle.getPropertyValue('--width')) || 0
  return width
}

/**
 * Update the progress bar with the given value
 * @param {number} newWidth - A positive number meant to be the new percent of the progress bar
 */
function updateProgressBar (newWidth) {
  progressBar.style.setProperty('--width', newWidth * 100)
}


/*
 * Convert
 */

/**
 * Writes the generic beginning of a facet to the given stream
 * @param {fs write stream} stream 
 */
function writeFacetBeginning (stream) {
  stream.write("facet normal 0 0 0" + "\n" + "outer loop" + "\n")
}

/**
 * Writes the generic beginning of a caet to the given stream
 * @param {fs write stream} stream 
 */
function writeFacetEnd (stream) {
  stream.write("endloop" + "\n" + "endfacet" + "\n")
}

/**
 * Coverts the already selected file to an stl file
 */
function convert() {
  // Not converting if there is no file selected
  if(filePath == null) {
    return
  }


  // Making the mat
  let src = cv.imread('img-for-analysis', cv.IMREAD_GRAYSCALE)

  // Variable to hold the pixel values of the image
  let pixelValues = [...Array(src.rows)].map(e => Array(src.cols).fill(null))
  //Storing the values of the pixels in the array
  for(let i = 0; i < src.rows; i++) {
    for (let j = 0; j < src.cols; j++) {
      pixelValues[i][j] = parseInt(src.ucharAt(i, j * src.channels()))
    }
  }

  // Creating the read stream
  let stream = fs.createWriteStream(fileName.split('.')[0] + '.stl', {flags: 'w'})

  // Settings
  let scale = 1/255

  // Status
  let maxProgress = (src.rows * src.cols)  // Every pixel + initial triangles for sides
  let currentProgress = 0

  stream.write("solid pic" + "\n")

    /*
    * Iterating through every other pixel to generate the facets of the top face
    *
    *                * -- * -- *
    *                |  \ | /  |
    *                * -- * -- *
    *                |  / | \  |
    *                * -- * -- *
    *
    */

    for (let row = 1; row < src.rows; row+=2)
    {
        for (let col = 1; col < src.cols; col+=2)
        {
            /*
            *
            * Creating facets w/ clockwise vertexes
            *
            * facet normal n1 n2 n3
            *   outer loop
            *     vertex x y z
            *     vertex x y z
            *     vertex x y z
            *   "\n"oop
            * endfacets
            */

            /* Top-Left
                *--*
                 \ |
                   *
            */
            writeFacetBeginning(stream);
          stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
            stream.write("vertex " + (row-1) + " " + col + " " + pixelValues[(row-1)][col] * scale + "\n")
            stream.write("vertex " + (row-1) + " " +(col-1)+ " " + pixelValues[row-1][col-1] * scale + "\n")
            writeFacetEnd(stream);

            /* Top-Left
                *
                | \
                *--*
            */
            writeFacetBeginning(stream);
            stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
            stream.write("vertex " + (row-1) + " " +(col-1)+ " " + pixelValues[(row-1)][col - 1] * scale + "\n")
            stream.write("vertex " + row + " " +(col-1)+ " " + pixelValues[row][col-1] * scale + "\n")
            writeFacetEnd(stream);

            /* Top-Right
                *--*
                | /
                *
            */
            if (col+1 < src.cols) //Is this pixel not on the last column
            {
                writeFacetBeginning(stream);
                stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
                stream.write("vertex " + (row-1) + " " +(col+1)+ " " + pixelValues[(row-1)][col + 1] * scale + "\n")
                stream.write("vertex " + (row-1) + " " + col + " " + pixelValues[(row-1)][col] * scale + "\n")
                writeFacetEnd(stream);

                /* Top-Right
                       *
                     / |
                    *--*
                */
                writeFacetBeginning(stream);
                stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
                stream.write("vertex " + row + " " +(col+1)+ " " + pixelValues[row][col + 1] * scale + "\n")
                stream.write("vertex " + (row-1) + " " +(col+1)+ " " + pixelValues[(row-1)][col + 1] * scale + "\n")
                writeFacetEnd(stream);
            }

            if (row + 1 < src.rows) //Is this pixel not on the last row?
            {
                /* Bottom-Left
                       *
                     / |
                    *--*
                */
                writeFacetBeginning(stream);
                stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
                stream.write("vertex " +(row+1)+ " " +(col-1)+ " " + pixelValues[row + 1][col - 1] * scale + "\n")
                stream.write("vertex " +(row+1)+ " " + col + " " + pixelValues[row + 1][col] * scale + "\n")
                writeFacetEnd(stream);

                /* Bottom-Left
                    *--*
                    | /
                    *
                */
                writeFacetBeginning(stream);
                stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
                stream.write("vertex " + row + " " +(col-1)+ " " + pixelValues[row][col - 1] * scale + "\n")
                stream.write("vertex " +(row+1)+ " " +(col-1)+ " " + pixelValues[row + 1][col - 1] * scale + "\n")
                writeFacetEnd(stream);
            }

            if (row + 1 < src.rows &&(col+1)< src.cols)
            {
                /* Bottom-Right
                    *
                    | \
                    *--*
                */
                writeFacetBeginning(stream);
                stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
                stream.write("vertex " +(row+1)+ " " + col + " " + pixelValues[row + 1][col] * scale + "\n")
                stream.write("vertex " +(row+1)+ " " +(col+1)+ " " + pixelValues[row + 1][col + 1] * scale + "\n")
                writeFacetEnd(stream);

                /* Bottom-Right
                    *--*
                     \ |
                       *
                */
                writeFacetBeginning(stream);
                stream.write("vertex " + row + " " + col + " " + pixelValues[row][col] * scale + "\n")
                stream.write("vertex " +(row+1)+ " " +(col+1)+ " " + pixelValues[row + 1][col + 1] * scale + "\n")
                stream.write("vertex " + row + " " +(col+1)+ " " + pixelValues[row][col + 1] * scale + "\n")
                writeFacetEnd(stream);
            }

            currentProgress += 4
        }
        updateProgressBar(currentProgress/maxProgress)
    }

    function processRow(row = 1) {
      for (let col = 1; col < src.cols; col+=2) {
        // Your code
        currentProgress += 4;
      }
      updateProgressBar(currentProgress/maxProgress);
      if (row < src.rows) {
        requestAnimationFrame(() => processRow(row + 2));
      }
    }