Question

在下面的代码中，我有3个alert()，我希望分别触发这些警报。第一个alert(1)，第二个alert(2)，然后是alert(3)但现在由于img.onload()之前alert(3)函数alert(2)被解雇了。

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
var file, img;
if ((file = this.files[0])) {
    img = new Image();
    alert(1)
    img.onload = function() {
         alert(2)
    };
    alert(3)
    img.src = _URL.createObjectURL(file);
}
});

Demo

有没有办法做到这一点？

Answer 1

只需使用Promise。

var _URL = window.URL || window.webkitURL;

const asyncOnload = img =>
  new Promise((resolve, reject) => {
    img.onload = () => resolve(alert(2))
    img.onerror = () => reject()
  })

$("#file").change(function(e) {
  var file, img;
  if ((file = this.files[0])) {
      img = new Image();
      alert(1)

      asyncOnload(img).then(() => alert(3))

      img.src = _URL.createObjectURL(file);
  }
});

Try it here

Answer 2

您是否尝试将第三个警报放入onload回调中？

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        alert(1);
        img.onload = function() {
            alert(2);
            alert(3);
        };
        img.src = _URL.createObjectURL(file);
    }
});

Answer 3

您可以尝试添加要回拨的功能。摘录示例：

var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
var file, img;
    if ((file = this.files[0])) {
      img = new Image();
      alert(1);
      img.onload = function() {
          alert(2);
          call();
      };
      img.src = _URL.createObjectURL(file);
   }
});

function call(){
    alert(3);
}

Answer 4

嗯，您的问题有多种解决方案。第一个明显的问题是在img.onload函数中调用您的警报，如下所示：

img.onload = () => {
   alert(2)
   alert(3)
}

或者，您可以简单地使用setTimeout函数，但是连接速度较慢时会更“冒险”。希望我能解决你的问题。

Javascript等待上传图片

4 个答案: