回调函数最先执行

Question

我做了以下代码：

function popup(content,callback){
// create the overlay
var $overlay = $('<div />').appendTo('body');
    $overlay.attr('class','overlay');
// create a popup
var $popup = $('<div />').appendTo('body');
    $popup.attr('class','popup');
// add the image
if(typeof content.imageUrl !== 'undefined'){
    var $popup_image = $('<img />').appendTo($popup);
        $popup_image.attr('src',content.imageUrl);
        $popup_image.attr('class','popup_img');
};
// create a popup title
var $popup_title = $('<h1 />').appendTo($popup);
    $popup_title.attr('class','popup_h1');
    $popup_title.html(content.title);
// create a popup body
var $popup_body = $('<p />').appendTo($popup);
    $popup_body.attr('class','popup_p');
    $popup_body.html(content.text);
// create a popup close
var $popup_close = $('<span />').appendTo($popup);
    $popup_close.attr('class','close');
    $popup_close.html('x');
// create the fadeIn/fadeOut speed
if(typeof content.speed !== undefined){
    var popup_fadespeed = content.speed;
} else {
    var popup_fadespeed = 'slow';
};
    // bind the close function to $popup_close
    $popup_close.bind('click',function(){
        $popup.fadeOut(popup_fadespeed);
        $overlay.fadeOut(popup_fadespeed);
    });
    // bind the close function to $overlay
    $overlay.bind('click',function(){
        $popup.fadeOut(popup_fadespeed);
        $overlay.fadeOut(popup_fadespeed);
    });
    // show the overlay
    $overlay.fadeIn(popup_fadespeed);
    // show the popup
    $popup.fadeIn(popup_fadespeed);

    if(callback && typeof(callback) === "function"){
        return callback();
    } else {
        return;
    }}

它在我的 window 中创建了一个弹出窗口，一切正常，回调除外。

当我做这样的事情时：

$("#test").click(
function(){popup(
{
    title : 'title',
    text : 'text',
    imageUrl : 'http://localhost/frontend/media/images/logo.png',
    speed : 'slow'
},
function(){$('body').css('background','red');}
)});

现在正文背景会在弹出窗口显示之前发生变化。当我用警报测试它时，警报也出现在弹出窗口之前（所以看起来回调函数首先被执行）。

有人可以帮我解决这个问题吗？或者定位到我代码中的错误？

提前致谢

Answer 1

把最后一个改成这个：

if(callback && typeof(callback) === "function"){
   $popup_image.load(callback);
    } else {
        return;
    }}

.load 是 dom 元素 img 的 onload 的一个包装，如果你在其中放入一些函数，它将在图像加载后执行. jquey.load

添加 jsfiddle 以证明它有效。

回调函数最先执行

Callback function executed first

javascript

function

callback