僅在加載后將 DOM 元素附加到其他 DOM 元素

Question

我正在嘗試編寫代碼來執行以下操作：

1. 當用戶上傳圖像時，將這些圖像的預覽作為畫布元素返回。 （這由 loadImage API 處理）
2. 在每個畫布旁邊附加 div 元素。

要按順序執行上述操作，只有在畫布元素完全繪制后，我才需要調用 document.querySelectorAll 方法。

這是我寫的代碼。 我嘗試在這里使用 promise，但顯然在調用 loadImage 函數之后，而不是在完全繪制畫布元素之后解析了 promise。 當我運行該函數時，預覽將填充為畫布元素，但未附加“photo_order”div 元素。

function rpu() {
  let promise = new Promise(async function(resolve, reject) {
    let filez = e.target.files;
    let files = Array.from(filez);
    files.forEach(function(file) {
      loadImage(
        file,
        function(img) {
          document.querySelector('#r_im_preview').appendChild(img);
          document.querySelector('#r_im_preview').classList.remove('hide');
        }, {
          maxWidth: 150,
          orientation: true,
          contain: true
        }
      )
    });
    resolve();
  });
  promise.then(function() {
    let k1 = document.querySelectorAll('canvas');
    let k2 = Array.from(k1);
    let k3 = '<div class="photo_order" style="cursor: pointer;"></div>'
    k2.forEach(k => {
      k.insertAdjacentHTML('afterEnd', k3);
    })
  });
}

如何修復代碼以實現我想要做的事情？ 非常歡迎任何建議。

Answer 1

我認為您需要重構代碼以正確使用 Promise。 像這樣的東西：

const appendPreview = (img) => {
    document.querySelector('#r_im_preview').appendChild(img)
    document.querySelector('#r_im_preview').classList.remove('hide');
}

const loadImageP = (file, cb, settings) => new Promise((resolve, reject) => {
    try {
        const cbP = (...args) => (cb(...args), resolve)
        loadImage(file, cbP, settings)
    } catch {
        reject()
    }
})

const settings = {
    maxWidth: 150
    orientation: true,
    contain: true
}

async function rpu() {
    const promises = [...e.target.files].reduce((acc, file) => 
        [...acc, loadImageP(file, appendPreview, settings))], [])

    await Promise.all(promises)

    let canvasNodes = document.querySelectorAll('canvas');
    let orderNode = '<div class="photo_order" style="cursor: pointer;"></div>'
    [...canvasNodes].forEach((n) => { n.insertAdjacentHTML('afterEnd', orderNode);
}