Execution order issue javascript/jquery

Question

I am facing a little issue in my jQuery script.

So, I have a function set_fav_item to set my item after editing it. After that is done, I want to execute another function. I don't understand why it is not working, since I do it well elsewhere in my script...

My function 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);

    }

My try :

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

When I edit the color of my item in my edit box and click on save button (id = #send), then the console.log gives me back the old color not the new one.

If I use my browser console to check the $('#242') background color, i got the new one as expected.

Many thanks for your help.

Sommy

please share relevant html code as well.

gurvinder372
– gurvinder372

2016-01-06 10:34:23 +00:00
Commented Jan 6, 2016 at 10:34 — gurvinder372
– gurvinder372, Commented Jan 6, 2016 at 10:34
set_fav_item is not returning a promise

Arun P Johny
– Arun P Johny

2016-01-06 10:35:26 +00:00
Commented Jan 6, 2016 at 10:35 — Arun P Johny
– Arun P Johny, Commented Jan 6, 2016 at 10:35
also need to pass a function reference to then

Arun P Johny
– Arun P Johny

2016-01-06 10:37:18 +00:00
Commented Jan 6, 2016 at 10:37 — Arun P Johny
– Arun P Johny, Commented Jan 6, 2016 at 10:37

Denys Séguret · Accepted Answer · 2016-01-06 12:56:32Z

1

You need to return a promise. A solution is to use $.Deffered():

function set_fav_item(){

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

Another simpler solution is to call .promise() on the element:

function set_fav_item(){

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

In both cases you can do

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

or directly

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

edited Jan 6, 2016 at 12:56

answered Jan 6, 2016 at 10:41

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

donfal71 Over a year ago

Thanks It Works perfectly. So, If I well understood, this is due to my hide() call ?

Denys Séguret Over a year ago

@donfal71 I don't understand your comment. When the callback I pass to hide is called, it resolves the promise, which executes the function it received in then.

donfal71 Over a year ago

I just meant that I had to use a promise because of my hide() function call. I told that because I faced this issue only in this case although I have similar sequential function calls in my script and they work without promise.

Denys Séguret Over a year ago

@donfal71 Yes, the hide function returns the element instead of a promise. But I thought of a better simpler solution, see edit.

Simon H · Accepted Answer · 2016-01-06 12:22:26Z

0

You need to await for the animation to finish but they use callbacks, not promises. So you need to consider something like:

function set_fav_item(cb){

...;

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

}

And call it

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

edited Jan 6, 2016 at 12:22

answered Jan 6, 2016 at 10:38

Simon H

21.2k14 gold badges83 silver badges144 bronze badges

1 Comment

donfal71 Over a year ago

I think there is an error in the call of set_fav_item , isn't it?

Collectives™ on Stack Overflow

Execution order issue javascript/jquery

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related