2つの異なるイベントが完了した後に関数を呼び出す方法

Question

モーダルポップアップでクロッパープラグインを初期化する必要があります。ユーザーがイメージアップローダをクリックするたびに、そのイメージをポップアップで表示したいので、モーダルポップアップが完全にロードされたイメージと同様に、そのショーアニメーションを終了するときにクロッパープラグインを初期化する必要があります。

現在、画像がロードされる前にinitCroping関数が呼び出され、いつか正しく呼び出されることがあります。 イメージがロードされた後、$（ "＃crop-img"）srcを変更した後にinitCroping関数を呼びたいと思います。最後に、モーダルポップアップが完全にロードされているかどうかをチェックしてiniCroping関数を呼び出す必要があります。

両方のイベントが予測できない場合があります。モーダルポップアップが最初に表示されることがあります。イベントの完了を確認してから、initCropingが呼び出す必要があります。

これら2つのイベントが完了した後、簡単に関数を呼び出す方法はありますか。

$('#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

最も単純方法：Screw-FileReaderで

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

といくつかの約束はあまりにも

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) 

の作品