两个不同的事件完成后如何调用函数答案

【问题标题】：how to call function after two different event complete两个不同的事件完成后如何调用函数
【发布时间】：2016-10-14 21:47:32
【问题描述】：

我需要在模态弹出窗口中初始化裁剪器插件。每当用户单击图像上传器时，我想在弹出窗口中显示该图像，并且当模式弹出窗口完成其显示动画以及图像完全加载后，它应该初始化裁剪器插件。

目前正在发生的事情有时会在图像加载之前调用 initCroping 函数，有时它会正确调用。我想在加载图像并更改 $("#crop-img") src 后调用 initCroping 函数，最后它应该检查模态弹出窗口是否完全加载，然后它应该触发 iniCroping 函数。

这两个事件都是不可预测的，有时模态弹出首先出现，有时图像加载。我想检查事件是否完成，然后 initCroping 应该调用。

这两个事件完成后有没有简单的方法来调用函数。

$('#cropModel').on('shown.bs.modal', function() {
      //initCroping();

  });


$(".upload").change(function(e){

    var preview = $('#crop-img');
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();

    reader.addEventListener("load", function () {
      //preview.src = reader.result;
      $(preview).attr("src",reader.result);
      initCroping();
    }, false);

    if (file) {
      reader.readAsDataURL(file);
    }
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

最简单的方法：

var counter = 2;
function fireInitCroping() {
    --counter === 0 && initCroping();
}

$('#cropModel').on('shown.bs.modal', function() {
      fireInitCroping();
});


$(".upload").change(function(e){

    var preview = $('#crop-img');
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();

    reader.addEventListener("load", function () {
      //preview.src = reader.result;
      $(preview).attr("src",reader.result);
      fireInitCroping();
    }, false);

    if (file) {
      reader.readAsDataURL(file);
    }
});

【讨论】：

【解决方案2】：

Screw-FileReader 和一些承诺也可以工作

var shownPopup = new Promise(resolve => 
  $('#cropModel').one('shown.bs.modal', () => resolve())
)

var loadedImage = new Promise((resolve, reject) => {
  $(".upload").change(e => {
    // create a new Image obj from Blob that resolves/reject onload or onerror
    e.target.files[0].image().then(img => {
      img.id = "crop-img"
      $("#crop-img").replaceWith(img)
      resolve()
    } err => {
      console.error('not an image')
      reject(err)
    })
  })
})

// When both event's has fired then fire initCroping
Promise.all([shownPopup, loadedImage]).then(initCroping)

【讨论】：