Question

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

目前在启动图像之前调用initCroping函数时会发生什么，有时它会正确调用。我希望在图像加载后和更改$（＆＃34;＃crop-img＆＃34;）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);
    }
});

Answer 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);
    }
});

Answer 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)

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

2 个答案: