关于onload和计时器的问题

Question

                if (answer_img.length === 1) {
                    let img = new Image()
                    img.src = answer_img[0].src
                    answer_height -= this.subject_row_height
                    img.onload = function () {
                        img_number--
                        img_height = img.height
                    }
                }

        let img_onload = setInterval(function (img_number){
            if (img_number == 0){
                clearInterval(img_onload)
                answer_height += img_heihgt
            }
        },typeset.recursion_value)

上面的代码在一个for循环里面，下面的代码再for循环外面，我通过for循环遍历每一个p标签，在p标签里面有可能会存在图片，但是图片本身并没有加载到页面上面 ，因此我想通过onload来获取图片的高度，但是当方法执行完了之后，图片的高没有添加到总高度里面，于是我想到的是在for循环下面添加一个计时器，当获取到高之后在执行后面的程序。
但是现在的问题是我的断点打在计时器后面，这时候再看img_height它的输出结果为undefined，整个页面加载完成后图片的高度依旧没有增加到总高度里面,想问问这个该怎么解决呢
onload里面console.log(img_height)的话到是可以出结果

Answer 1

因为img_number是直接从匿名函数传入的,而匿名函数是被定时器调用的,不会传img_number,应该去掉img_number,像下面这样

let img_onload = setInterval(function () {
  if (img_number == 0) {
    clearInterval(img_onload)
    answer_height += img_heihgt
  }
}, typeset.recursion_value)

如果可以使用 Promise 的话,也可以按照如下方式处理

Promise.allSettled(
  answer_img.map(
    ({ src }) =>
      new Promise((resolve, reject) => {
        let img = new Image()
        img.src = src
        img.onload = () => {
          resolve({
            imgHeight: img.height,
            subjectRowHeight: this.subject_row_height,
          })
        }
      }),
  ),
).then((data) => {
  const newAnswerHeight = data.reduce(
    (naswerHeight, { imgHeight, subjectRowHeight }) =>
      naswerHeight - subjectRowHeight + imgHeight,
    naswer_height,
  )

  // 按照你原有的逻辑 newAnswerHeight 就是你想要的了,可以在下面接着去处理其他逻辑
})