v2.5.2
Giriş yap

JS ile Bir Fonksiyonun Call Yapılmasını Beklemek.

hrnsykk
665 defa görüntülendi
1

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 jquery
Cevap yaz
Cevaplar (1)
defatul
1331 gün önce

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);
0
#004280