將外部變量存入image.onload

我想獲取圖像尺寸，然後執行更多操作。由於圖像載入是異步的，我決定在onload調用中做所有事情。這就是我現在所擁有的：將外部變量存入image.onload

function getMeta(url, callback) { 
    var img = new Image(); 
    img.src = url; 
    img.onload = function() { callback(this.width, this.height); }; 
}

// Ajax響應這一些信息：

function(res) { 
    var totalFound = res.data.length; 
    var photo = []; 

    for (var i = 0; i < totalFound; i++) { 
     var full = res.data[i].urls.raw; 
     var thumb = res.data[i].urls.thumb; 
     var user = res.data[i].user.name; 
     var links = res.data[i].user.links.html; 

     getMeta(thumb,function(width, height) { 
      console.log(width + 'px ' + height + 'px') 

      photo.push({ 
       full: full, 
       thumb: thumb, 
       user: author, 
       link: links 
       width: this.width 
      }); 
     }); 
    }; 
};

的問題是充滿變數，拇指，用戶和鏈接不可用在getMeta回調。如何克服這一點？

來源

2017-05-10 funguy

除了答案中的解決方案，'user：author'應該是'user：user'，'link：links'缺少一個逗號，'this.width'應該是'width'：https：/ /jsfiddle.net/qdnw9f5w/ –

問題是這些變量的範圍在for循環之外，這意味着它們在每次連續迭代中都被更新而不是聲明，並且每個回調都會看到它們的最終狀態，因爲它們在一段時間之後都被調用for循環已完成。

如果用forEach取代你for循環，你會爲每個迭代一個新的範圍和變量將被作用域你希望他們的方式：如果你有使用的選項

function(res) { 
    var photo = []; 

    res.data.forEach(function(item) { 
     var full = item.urls.raw; 
     var thumb = item.urls.thumb; 
     var user = item.user.name; 
     var links = item.user.links.html; 

     getMeta(thumb,function(width, height) { 
      console.log(width + 'px ' + height + 'px') 

      photo.push({ 
       full: full, 
       thumb: thumb, 
       user: author, 
       link: links, 
       width: this.width 
      }); 
     }); 
    }); 
};

ES6語法，另一種方法是簡單地使用let而不是var，它將正確地將變量的範圍限定爲每次迭代。

來源

2017-05-10 23:29:17

將外部變量存入image.onload

回答

相關問題