JS ile Bir Fonksiyonun Call Yapılmasını Beklemek.
Arkadaşlar Cropper.Js ve Konva.Js kullanaran bir resim galerisi yapmak istiyorum.
Algoritmam şu şekilde.
1: Canvas'da Konva.js ile oluşturuduğum elemana tıklıyorum.
2: Bir modal açılıyor ve bu eleman için hangi resmi kırpmam gerektiğini seçiyorum.
3: Seçtiğim resimi kırpmak için ayrı bir modal açılıyor ve kırma işlemini yapıyorum.
4: Kırpma sonucunu ilk işlemde seçmiş olduğum elemenın fillPatterImage attr. eklemek istiyorum.
Soru: Aşağıdaki kodun cropImage() fonksiyonunun sonucu beklemesini istiyorum.
Fakat cropImage fonksiyonu başka bir button tarafından tetikleniyor.
(async () => {
const imgSrc = await cropper.getCroppedCanvas({ width : 110 , height: 110}).toDataURL();
cropper.reset();
const img = new Image();
img.src = imgSrc;
await img.decode();
event.target.fillPatternImage(img)
layer.draw();
})();
Javascript de bir işlem bittikten sonra programın devam etmesini istiyor isen Promise olayını öğren
https://javascript.info/promise-basics
https://javascript.info/promise-api
https://javascript.info/promise-chaining
Örnek Misal
function _resolve(func, time = false) {
return new Promise(resolve => {
if( time ){
setTimeout(() => {
func.call(this);
resolve(true);
}, time);
}else{
func.call(this);
resolve(true);
}
});
}
_resolve(() => {
console.log('Test');
}, 3000).then(() => alert('Bitti.'));
Kullanman Gereken
function _resolve(func) {
return new Promise(resolve => {
func.call(this);
resolve(true);
});
}
_resolve(() => {
console.log('İşlem Başladı..');
}).then(() => {
console.log('İşlem Bitti, Diğer Yapılacak İşlem');
});
Jquery İçinde Şöyle
var proram1 = $.Deferred();
var proram2 = $.Deferred();
$.when( proram1 ).then(( one ) => {
console.log('Birinci Program İşlemini Bitirdi.');
});
$.when( proram2 ).then(( two ) => {
console.log('İkinci Program İşlemini Bitirdi.');
});
setTimeout(() => {
proram1.resolve( true );
}, 15000);
setTimeout(() => {
proram2.resolve( true );
}, 5000);