javascript - javascript/jquery执行顺序问题

Question

我的 jQuery 脚本遇到了一个小问题。

所以，我有一个函数 set_fav_item 来在编辑后设置我的项目。完成之后，我想执行另一个函数。我不明白为什么它不起作用，因为我在脚本的其他地方做得很好......

我的函数 set_fav_item() :

    function set_fav_item(){

    var postid = $("#window-edit input#postid").val();
    var icon = $("#window-edit span.selected-icon > i").clone();
    var color = $("#window-edit button.jscolor").css("background-color");
    var edited_item  = $("#fav-items #"+postid+"");

    edited_item.css("background-color",color);
    icon.appendTo($("#fav-items #"+postid+" a"));

    $("#window-edit , .overlay").hide(400);

    }

我的尝试:

    $("#window-edit #send").on("click",function(){   
    // item with id #242 is an example
    $.when(set_fav_item()).then(console.log($("#242").css('background-color')));   
    });

当我在编辑框中编辑项目的颜色并单击“保存”按钮(id = #send)时，console.log 会返回旧颜色而不是新颜色。

如果我使用浏览器控制台检查 $('#242') 背景颜色，我会得到预期的新颜色。

非常感谢您的帮助。

索米

Answer 1

你需要返回一个 promise 。解决方案是使用 $.Deffered():

function set_fav_item(){

    ...
    var def = $.Deferred();
    $("#window-edit , .overlay").hide(400, def.resolve.bind(def));
    return def;
}

另一个更简单的解决方案是在元素上调用 .promise():

function set_fav_item(){

    ...
    return $("#window-edit , .overlay").hide(400).promise();
}

在这两种情况下你都可以这样做

 $.when(set_fav_item()).then(function(){
       console.log($("#242").css('background-color'));
 }); 

或直接

 set_fav_item().then(function(){
       console.log($("#242").css('background-color'));
 });