Delay javascript function until css animation completes
I am trying to create a modal object library that will create and open div, iframe, img similar to colorbox. I'm doing this in pure javascript, so please don't recommend jQuery.
The problem is the user creates a new modal method using var myModal = new modal (parameters, width, height), I want it to check if the modal code exists, closes it, waits for the closing animation, and then continue to create new modal. I can already do everything, but I have a problem to create a new modal until the old one disappears. I am aware of webkitTransisionEnd and custom events firing, but this is not a problem. I need the actual code to wait for the old modal to finish closing until it continues with the remaining function and still returns the correct object to the user . Here are some of the things I've tried:
- Create a TransisionEnd listener to wait for the animation to finish and then create a new modal. (it worked, but given that it becomes a nested function, it's hard to return the correct object).
- Using try, catch block. (it didn't work for my purposes)
- Using countless variations of the same where I use recursive functions
If anyone has any ideas, feel free to post them. I've tried many things, but apparently not the only one I need. Thank.
EDIT:
I was able to figure it out. All I had to do was attach a transitionEnd listener to an already existing modal, and then create an additional function outside the class, which then resembles the modal with the same constructor. The code looks something like this:
function create(options, width, height) {
return new modal(options, width, height);
}
function modal(options, width, height) {
if (modal != null) {
modal.close();
modal.addEventListener('webkitTransitionEnd', function() {
create(options,width,height);
});
}
return;
}
source to share
You cannot make the code wait (for example, suspend the execution of the current thread of execution) until some future event occurs. Javascript just doesn't support it or works this way. It has no way to block the current thread of execution other than a couple of modal functions like alert()
.
What you can do is use callbacks to notify some caller of a future event. But the calling code will register its callback and will return immediately and continue execution, so the calling code must be written to handle the callback implementation.
If you're trying to do all the work inside your library, then it shouldn't be that hard. When the caller creates a new modal, you just need to check for an existing modal dialog. If someone is not okay, you continue as usual. If someone got up, you register a callback notification with the previous one, keep the contents of the constructor, but don't actually create a new modal dialog. Then, when your callback is called to indicate that the previous modal dialog is complete, you are done creating a new modal file.
If these modal dialogs are all of your own creation, you need to implement completion notification so that they close, they can notify listeners that they are done now. If they are using an animation to close, and you want to wait for the close notification until the animation is complete, you can implement that as well. If you are using CSS3 animations, then as you seem to already know, you can use the transtionEnd event to know when the animation is in progress, or if you know the animation timing and you don't need to be precise, you can also just use setTimeout()
to know when the animation is complete.
source to share