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会返回旧颜色而不是新颜色。

如果我使用浏览器控制台检查$（＆＃39;＃242;＃39;）背景颜色，我会按预期获得新的颜色。

非常感谢你的帮助。

Sommy

Answer 1

你需要回复一个承诺。解决方案是使用$.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'));
 });

Answer 2

你需要等待动画完成，但他们使用回调，而不是承诺。所以你需要考虑类似的事情：

function set_fav_item(cb){

...;

$("#window-edit , .overlay").hide(400, function() {cb()} );

}

并称之为

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

执行订单问题javascript / jquery

2 个答案: