Holen Sie externe Variablen in image.onload

Question

Ich möchte Bildmaße erhalten und danach weitere Aktionen ausführen. Da image onload asynchron ist, habe ich beschlossen, alles in dem Onload-Aufruf zu tun. Das ist, was ich habe jetzt:

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

// Ajax-Antwort dieses einige Informationen:

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 
      }); 
     }); 
    }; 
}; 

Das Problem ist, dass Variablen voll, Daumen, Benutzer und Links in dem getMeta Rückruf nicht verfügbar sind. Wie komme ich darüber hinweg?

Answer 1

Das Problem besteht darin, dass diese Variablen außerhalb der for Schleife liegen, was bedeutet, dass sie in jeder folgenden Iteration aktualisiert und nicht deklariert werden und jeder Callback den Endstatus von ihnen anzeigt, da sie alle einige Zeit später aufgerufen werden Die Schleife for ist abgeschlossen.

Wenn Sie Ihren for Schleife mit einem forEach ersetzen, werden Sie einen neuen Bereich für jede Iteration erstellen und die Variablen werden so, wie Sie sie wollen scoped werden:

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 
      }); 
     }); 
    }); 
}; 

Wenn Sie die Möglichkeit der Verwendung haben ES6-Syntax, eine Alternative ist, einfach let anstelle von var zu verwenden, die die Variablen auf jede Iteration richtig beschränken.