當將對象數組中的圖像URL轉換爲base64時，請勿在循環中創建函數

Question

我想循環訪問對象數組中的image_urls列表，並將它們轉換爲base64以供以後處理。

這是到目前爲止我的代碼：

function findR(f, p) { 
    for(var i = 0; i < p.length; i++) { 
    var userUpload = f.data; 
    toDataUrl(p[i].image_url, function(base64Img) { 
     console.log(base64Img); 
    }); 
    } 
} 

function toDataUrl(src, callback, outputFormat) { 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function() { 
    var canvas = document.createElement('CANVAS'); 
    var ctx = canvas.getContext('2d'); 
    var dataURL; 
    canvas.height = this.height; 
    canvas.width = this.width; 
    ctx.drawImage(this, 0, 0); 
    dataURL = canvas.toDataURL(outputFormat); 
    callback(dataURL); 
    }; 
    img.src = src; 
    if (img.complete || img.complete === undefined) { 
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
    img.src = src; 
    } 
} 

我不斷收到以下錯誤信息：「不要在一個循環中做功能」。我該如何調整自己的代碼來避免這個問題？

Answer 1

您需要外包你的功能（目前內部的for循環）外的for循環。由於JavaScript的創建在每次循環這個匿名函數，你會用不必要的開銷而告終。

由於與T他可以將JavaScript的性質寫入循環之外並在循環內引用它。如果您還想在toDataUrl中使用外部函數，則可以將外部函數移動到最高範圍（僅在function findR之前）。

function findR(f, p) { 
    // see here 
    var outsourcedFunction = function(base64Img) { 
     console.log(base64Img); 
    } 
    for(var i = 0; i < p.length; i++) { 
    var userUpload = f.data; 
    toDataUrl(p[i].image_url, outsourcedFunction); 
    } 
} 

function toDataUrl(src, callback, outputFormat) {...} 
}