javascript - 如何同步调用异步JavaScript函数？

在过去的两天里，我一直在处理此问题，而我的头正要爆炸。

我在SO中检查了与我的问题相关的每个问题，但找不到解决该问题的方法。

我想做的是用户尝试上传图像，它们在客户端被调整大小，然后被上传。我用过Pica library。一个文件一切正常。但是，当我将其更改为多个文件时，会得到最后一张图像的副本。

发生了什么：循环1到N次-> resizeImg N次

理想的解决方案：循环1-> resizeImg（1）->循环2-> resizeImg（2）

任何帮助，将不胜感激。

我的代码如下

function resizeImg(source) {
    img = new Image;
    img.src = source;
    img.onload = function() {
        width = img.naturalWidth;
        height = img.naturalHeight;
        ratio = Math.min(targetWidth / width, targetHeight / height);
        resizer = window.pica();
        canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        ctx.canvas.width = width * ratio;
        ctx.canvas.height = height * ratio;
        resizer.resize(img, canvas, {
            quality: 3,
            alpha: true,
            unsharpAmount: 0
        }).then(result => resizer.toBlob(result, 'image/jpeg', 0.90)).then(blob => imgBlobArray.push(blob)).then(function() {
            console.log(i);
            console.log(imgBlobArray);
        });
    };
}
document.getElementById('select').onchange = function(evt) {
    for (i = 0; i < this.files.length; i++) {
        resizeImg(window.URL.createObjectURL(this.files[i]));
    }
}

最佳答案

问题是您没有为每个img调用单独绑定resizeImg-在第一次使用var之前没有const或let或img 。您正在隐式创建全局变量。因此，对于口译员来说，

var img;
function resizeImg(source) {
  img = new Image;
  img.src = source;
  img.onload = function() {

img正在不断重新分配。因此，在所有迭代之后，img最终将仅仅是使用img创建的最后一个resizeImg-对其他Image的引用已丢失。

因此，请始终明确声明变量，以确保每个resizeImg调用均具有单独的img绑定。对所有其他变量也执行相同的操作，否则它们将隐式全局化。

function resizeImg(source) {
    const img = new Image;
    img.src = source;
    img.onload = function() {
        const width = img.naturalWidth;
        const height = img.naturalHeight;
        const ratio = Math.min(targetWidth / width, targetHeight / height);
        const resizer = window.pica();
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        ctx.canvas.width = width * ratio;
        ctx.canvas.height = height * ratio;
        resizer.resize(img, canvas, {
            quality: 3,
            alpha: true,
            unsharpAmount: 0
        }).then(result => resizer.toBlob(result, 'image/jpeg', 0.90)).then(blob => imgBlobArray.push(blob)).then(function() {
            console.log(i);
            console.log(imgBlobArray);
        });
    };
}
document.getElementById('select').onchange = function(evt) {
    for (let i = 0; i < this.files.length; i++) {
        resizeImg(window.URL.createObjectURL(this.files[i]));
    }
}

关于javascript - 如何同步调用异步JavaScript函数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50518002/