Question

我的HTML：

<img id="pv" src="#" />
<input type="file" onClick="preview(input)" />

我的JQuery代码：

function preview(input) {
  if (input.files && input.files[0]){
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#pv').attr('src', e.target.result)
    };
    reader.readAsDataURL(input.files[0]);
  }
  b();
}

function b() {
  crop_dp(); //This will run the jcrop.
}

好了我的问题是，当调用preview（）函数时，同时也会调用b（）函数。但是我需要在完成preview（）函数后调用b（）函数。我尝试谷歌它，另一个尝试其他stackoverflow问题。但他们没有帮助。

Answer 1

在回叫中呼叫，而不是在功能后调用。这是一个异步调用。：

function preview(input) {
  if (input.files && input.files[0]){
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#pv').attr('src', e.target.result);
      // Instead of calling after the function. It is an async call.
      b();
    };
    reader.readAsDataURL(input.files[0]);
  }

}

function b() {
  crop_dp(); //This will run the jcrop.
}

Answer 2

您需要在加载回调中调用b，因为读取文件内容是异步作业

function preview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#pv').attr('src', e.target.result);
            b();//need to do it here
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function b() {
    crop_dp(); //This will run the jcrop.
}

我需要在预览功能完成后运行一个函数

2 个答案: