回调而不是 setTimeout

Posted 2023-04-13

【中文标题】回调而不是 setTimeout

【英文标题】：Callback instead of setTimeout

【发布时间】：2018-06-21 18:19:39

【问题描述】：

我有以下工作代码：

// 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());

看来我还不懂回调...

【参考方案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? 是了解更多回调函数的好地方。

【讨论】：

感谢您的回答，它有效。当我查看可用事件时，我希望 .ready 事件也应该起作用，但事实并非如此

@ÖmerSoy 很高兴我能帮上忙。据我所知，ready“事件”是一个 jQuery 构造，只发生一次（当 DOMContent 加载并准备好时）。您可以在developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement 找到其他有用的img 元素事件@