javascript callback function after several jQuery calls

Question

I got the following code:

$('#some_object_id').hide();
$('div#some_version_div').hide();
$('#some_another_object_id').show();
someFunction();

I want to issue my someFunction() only after the last of these 3 finishes its action. The problem is that from time to time they finish in different order (ie now the last may be the second, the other time the first one etc.) Now someFunction() fires without waiting for these 3 to finish. Any ideas how to fix it? Thank you.

You're not passing a duration parameter to show() or hide(), so their effects should be immediate. So it seems to me the order should be reliable and the effects instantaneous. — Mitya
– Mitya, Commented Aug 22, 2017 at 16:35
@Utkanos - the default is actually 400ms (api.jquery.com/hide) — Stuart
– Stuart, Commented Aug 22, 2017 at 16:35
In fact they are not instantaneous. They are made with some noticeable delays — Masha
– Masha, Commented Aug 22, 2017 at 16:36
It's default 400 only when passing params. If you pass none, it's null. From the docs: "[When called with no duration param,] the matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" )" — Mitya
– Mitya, Commented Aug 22, 2017 at 16:39
Because in your example you are actually setting the speed - to null! -- The docs go on to say "When a duration, a plain object, or a "complete" function is provided, .hide() becomes an animation method. " meaning it will take on the default speed of 400ms of not set. — Stuart
– Stuart, Commented Aug 22, 2017 at 16:42

Sidney · Accepted Answer · 2017-08-22 18:18:11Z

4

jQuery's hide() and show() functions accept a function as their argument which is called when they finish. (aka, a callback).

$('selector').hide(function onFinish() {
  console.log('done')
})

To combine three of them together, I'd convert them to a Promise, like so:

function promisify(func,selector){
  return new Promise(function (resolve) {
    $(selector)[func](resolve)
  })
}

Promise.all([
  promisify('hide', '#test'),
  promisify('hide', '#test1'),
  promisify('show', '#test2')
]).then(function onFinish() {
  console.log('done!')
})

edited Aug 22, 2017 at 18:18

answered Aug 22, 2017 at 16:43

Sidney

4,8152 gold badges21 silver badges32 bronze badges

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

4 Comments

artgb Over a year ago

How can I use Promise? Is it provided in javascript?

Sidney Over a year ago

@artgb Yes, Promises are part of JavaScript. There's tons of great tutorials. Here's one: developers.google.com/web/fundamentals/getting-started/primers/…

Patrick Evans Over a year ago

Well actually binding where you did is kind of pointless, here is a way without needing bind at all: jsfiddle.net/5o6btpnd just pass the function name, and selector and build the call in function.

Sidney Over a year ago

@PatrickEvans At this point I feel like you should get credit for the answer. But thanks for the suggestions!

Patrick Evans · Accepted Answer · 2017-08-22 16:42:32Z

1

You can pass a callback function to hide, and show that gets executed when the animation is complete. So if you want them to execute in order just call each one in the callback of the previous one.

$('#some_object_id,div#some_version_div').hide(()=>{
  $('#some_another_object_id').show(()=>{
    someFunction();
  });  
});

And if you want to prevent a bunch of inner callbacks, and not require each animation run dependent of the others, you could use a flag. Increment the flag in each callback, check to see if its at a certain value, and then execute your function if it is.

var flag = 0;
function incrementFlag(){
   flag++;
   if(flag>=2){
     flag=0;
     someFunction();
   }
}
$('#some_object_id,div#some_version_div').hide(incrementFlag);
$('#some_another_object_id').show(incrementFlag);

You could also modify the above to use a Promise, but will leave that for you to try.

answered Aug 22, 2017 at 16:42

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

4 Comments

Patrick Evans Over a year ago

@artgb, how so?

artgb Over a year ago

If the code contains more hide and show you have to change further

Patrick Evans Over a year ago

Well the question wasn't about how to make a callback for an arbitrary number of calls.

artgb Over a year ago

Good question for beginners

JohnnyAW · Accepted Answer · 2017-08-22 16:43:16Z

0

You should use a variable that you initially set to 0 and increase on every complete call. As soon as the variable hit the value 3 and can call your function:

var completed = 0;
elem.hide(400, function(){
    completed++;
    if(completed > 2) someFunction();
});
//same for other elements...

answered Aug 22, 2017 at 16:43

JohnnyAW

2,8761 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

javascript callback function after several jQuery calls

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related