回调而不是 setTimeout

Question

我有以下工作代码：

// Get photos from file and load first initial photo
$.ajax({
    type: "GET",
    url: "photos_gps.json",
    success: initialPhoto,
    error: handleError
});

function initialPhoto(data){

    console.log(data);

    var img_tag = "<img id=" + '"photoBox" src=' + "'photos/" + data[0].Filename + "' />";

    console.log("Img_tag: " + img_tag); 
    $('#mainBox').prepend(img_tag); 
    photos = data;

    setTimeout(function() {
        console.log($('#photoBox').height());
        console.log($('#photoBox').width());
    }, 1000);
}

首先我正在加载一个包含图像信息的文件。 成功后，我选择第一个图像并将其添加到 DOM 元素中。当我在没有 setTimeOut 函数的情况下记录图像的宽度和高度时，值将同时为 0 和 setTimeOut 函数 3648 和 5472。

我想摆脱 setTimeOut 函数，所以我尝试了以下回调函数：

$('#mainBox').prepend(img_tag, function() {
    console.log($('#photoBox').height());
    console.log($('#photoBox').width());
}); 

这会导致在图像下方添加以下文本：

function() { console.log($('#photoBox').height()); console.log($('#photoBox').width()); }

看来我还不懂回调...

Answer 1

虽然 jQuery 的 .prepend 方法确实采用了回调函数，但该回调函数需要：

返回一个 HTML 字符串、DOM 元素、文本节点或 jQuery 对象以插入到匹配元素集中每个元素的开头

img 元素的 height 和 width 最初是 0 的原因是图像尚未加载，而使用 .setTimeout 的延迟执行有效的原因是您的图像加载在延迟执行开始之前。

要在没有.setTimeout 的情况下完成此操作，请为图像的load 事件添加一个事件侦听器：

function initialPhoto(data) {
    console.log(data);

    var img_tag = $('<img />', {
        id: 'photoBox',
        src: 'photos/' + data[0].Filename,
    }).on('load', function (e) {
        console.log($('#photoBox').height());
        console.log($('#photoBox').width());
    });

    console.log("Img_tag: " + img_tag); 
    $('#mainBox').prepend(img_tag); 
    photos = data;
}

另外，What is a callback function? 是了解更多回调函数的好地方。