Question

我希望获得图片尺寸，然后执行更多操作。由于image onload是异步的，我决定在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回调中没有变量full，thumb，user和links。如何克服这个？

Answer 1

问题是这些变量的范围在for循环之外，这意味着它们在每次连续迭代中都被更新而不是声明，并且每个回调都将看到它们的最终状态，因为它们都被调用for循环完成后的一段时间。

如果用for替换forEach循环，则将为每次迭代创建一个新范围，变量将按照您希望的方式确定范围：

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，这样可以将变量适当地范围化到每次迭代。

将外部变量放入image.onload

1 个答案: