回调函数执行第一

我做了如下代码：回调函数执行第一

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

它在我的窗口创建一个弹出，一切workes发现，exept回调。

，当我做这样的事情：

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

现在摆在弹出的显示人体背景变化。当我用警报测试它时，警报也出现在弹出框之前（所以看起来像回调函数首先被执行）。

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

在此先感谢

来源

2015-06-20 samleurs

我的猜测与你添加一个图像到DOM和异步加载的图像有关，所以你最终在内容真正可见之前运行你的代码。大概你可以找到[图片加载插件]（https://github.com/desandro/imagesloaded） –

'return callback（）'调用函数，然后返回它的返回值。没有什么可以让它等到淡出效果之后，这将会异步发生。你尝试过'$ popup.fadeIn（popup_fadespeed，callback）;'？ – nnnnnn

@nnnnnn谢谢，它的作品！ – samleurs

更改最后这一点：

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

.load是的DOM元素img的onload，如果你把一些功能在它之上的包裹物，之后它会执行图像被加载。 jquey.load

添加jsfiddle以显示它的工作原理。

来源

2015-06-20 09:01:30 fuyushimoya

当我添加那段代码时，没有任何东西显示出来（如警报）。当我设置$ popup.load（callback（））（和回调函数后）时，回调会在加载弹出窗口之前触发。 – samleurs

糟糕，我搞砸了'$ popup'和'$ popup_image'，编辑过，再试一次？ – fuyushimoya

也不起作用。但我现在得到了解决方案（请参阅我的第一篇文章中的评论） – samleurs

回调函数执行第一

回答

相关问题