的Javascript鏈中的異步圖像大小調整功能

我用這lib調整大小並上傳之前壓縮圖像的Javascript鏈中的異步圖像大小調整功能

我調整我的圖片是這樣的：

var imgOne = $('#u-fileUpload-1')[0].files[0]; 
var imgTwo = $('#u-fileUpload-2')[0].files[0]; 

     if (imgOne !== undefined) { 
     ImageResizer.resizeImage(imgOne, resizeOptions, function(result) { 
      _this.imgArray.push(result); 
     }); 
     } 

     if (imgTwo !== undefined) { 
     ImageResizer.resizeImage(imgTwo, resizeOptions, function(result) { 
      _this.imgArray.push(result); 
     }); 
     }

我調整我的圖片，並將它們存儲陣列稱爲imgArray 唯一的問題是這些功能是異步的。所以我的代碼最終會發布/上傳imgArray爲空，因爲調整大小功能還沒有完成。

那麼有什麼辦法鏈接這些功能，或者檢查它們何時完成？

感謝

來源

2017-06-21 Kiow

可能的重複[爲什麼我的變量在函數內部修改後沒有改變？ - 異步代碼引用]（https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron） –

你知道嗎？異步是，你知道函數是異步的..但你沒有發佈使用這個數組的代碼，你正在填充。所以問題是 - 爲什麼？爲什麼該代碼被遺漏，爲什麼你會嘗試將同步/異步混合在一起？ – Mjh

用Promise實現它並使用Promise.all成功回調來發布表單。 – Hoyen

你可以讓一個函數，只需要像陣列來調整和回調：

function resizeImages(imgs, callback) { 
    var resizedImages = []; 
    for (var i = 0; i < imgs.length; i++) { 
     ImageResizer.resizeImage(imgs[i], resizeOptions, function(result) { 
      resizedImages.push(result); 
      if (resizedImages.length === imgs.length) { 
       callback(resizedImages); 
      } 
     }); 
    } 
}

並使用它：

var imgOne = $('#u-fileUpload-1')[0].files[0]; 
var imgTwo = $('#u-fileUpload-2')[0].files[0]; 

resizeImages([imgOne, imgTwo], function(resizedImages) { 
    //do work with resizedImages 
});

來源

2017-06-21 14:58:22 tymeJV

處理它作爲一個數組的異步功能（承諾）DOC

let imgArr = [img1,img2, ..... ]; 

var resizeArr = []; 
imgArr.forEach(img => { 
    let p = new Promise((resolve, reject) => { 
     (function(cImg){ 
     ImageResizer.resizeImage(cImg, resizeOptions, function(result) { 
      resolve(result); 
     }); 
     })(img); 
    }); 
    resizeArr.push(p); 
}) 

Promise.all(resizeArr).then(resizedImgs => { 
    //process new images 
})

FIDDLE

來源

2017-06-21 15:09:14 Vanojx1

的Javascript鏈中的異步圖像大小調整功能

回答

相關問題