Скачать или смотреть How to Run a jQuery Function Only After Another Function Completes

Learn how to ensure one jQuery function executes after another has fully completed by using callback functions effectively.
---
This video is based on the question https://stackoverflow.com/q/65713376/ asked by the user 'Nelson' ( https://stackoverflow.com/u/15002792/ ) and on the answer https://stackoverflow.com/a/65713447/ provided by the user 'Patrick Xavier Silerio' ( https://stackoverflow.com/u/4417001/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How do I run one Jquery function only after the first is completely done?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Run a jQuery Function Only After Another Function Completes

When working with animations in jQuery, it's common to run into scenarios where you want to execute a function only after another function has fully completed its execution. This is particularly important when animations affect layout, like when you're toggling a menu and changing the grid size of a div at the same time. In this post, we will explore how to achieve this step-by-step, using a practical example.

The Problem

Imagine you have a toggle button that controls a side menu with a sliding animation effect. When toggling this menu, you also need to adjust the layout of a neighboring div so that it expands to fill the available space after the menu has slid out. The main challenge here is ensuring that the layout update only happens after the slide animation completes.

Scenario Breakdown

You have a toggle button that, when clicked:

Slides a menu in or out from the left.

Changes the class of a neighboring div to adjust its width.

The problem arises when the layout change occurs before the menu animation is finished, causing a jarring visual effect where the div jumps to a different position on the page.

The Solution

To solve this problem, you'll want to utilize callback functions in jQuery. A callback function allows you to run code after another function has finished executing. Here’s how you can restructure your code effectively:

Step-by-Step Implementation

Wrap Your Layout Change in a Callback:
You should place the function that changes the class of your div inside the callback of the animation. Here’s how it can be structured:

[[See Video to Reveal this Text or Code Snippet]]

Code Explanation

The toggle method is used for animations. It accepts an object that includes the direction of the slide and the duration (in this case, 1000 milliseconds).

The last parameter of the toggle function (the empty function in the original code) can be used to define what should happen after the animation completes.

By moving $('# toggler').toggleClass('col-md-12 col-md-10'); inside this callback function, you ensure it runs right after the menu has finished sliding out.

Conclusion

By utilizing callback functions in your jQuery code, you can synchronize actions that depend on the completion of animations or other time-consuming processes. This approach not only resolves layout issues but also creates a smoother user experience.

If you're facing similar issues in your jQuery projects, remember to check for places where timing is crucial and consider using callbacks to control the flow of your functions.

Happy coding!