Execute 2 JavaScript functions in order

Question

I have a function with two lines, and I want them to execute in order. Function:

showNotification(message){ $("#notificationMessageBody").html(message); // line1 $("#notificationModal").modal('show'); //line2 } 

So, whenever I call showNotification("Hello World!") , How can I ensure that line1 executed to line2 (which means that content is loaded before modal triggers) Basically, I try to fill in my message in the modal body, and then show it, not before filling.

- EDIT -

The functions are actually executed one by one, but my modal pop-ups before jQuery loads my message in my #notificationMessageBody

The result, for example: If I call showNotification("Hello") , I get modal with "Hello" (the location of the modals and stuff is done), but then after that, if I call showNotification("World") modal, it appears with "Hello "first after that, it changes to Mir.

Note: "Hello" and "World" are a large piece of text, so, in my opinion, loading my DIV should take some time. Despite the fact that they are executed one after another, it appears (in general) that the first modal pops up, and then the replacement is performed. Hopefully the picture is now a little clear.

No AJAX is found anywhere around a function. Basically, this is my custom alert () function, which you can say. On my page there is a modal with the correct id. I modify the contents of the modal body (using the jQuery .html() function) and trigger the modal display, as seen from the code.

Answer 1

You can use the .promise() method (added in jQuery 1.6) to ensure that the second is executed after the first completion:

 $("#notificationMessageBody").html(message).promise().done(function() { $("#notificationModal").modal('show'); });