There are two functions, the first animation and the second asynchronous ajax data download to replace the content.

How to run the function to complete the download and animation?

all through jquery.

Launch

  • click on the link
  • start ajax loading content into variable
  • Start of animation

in fact, the idea of ​​smoothly animating an element to hide a download, instead of showing preloads.

  • Animation on what? And at what point in time does it start? - lazyproger
  • If only the second is asynchronous, then include the function call in the callback promise data loading. - JavaJunior
  • Animation via jquery, let's say fadeOut or fadeIn - grl

1 answer 1

You need to have a variable counter and in each asynchronous procedure increase it by 1. As soon as it reaches the value 2, all the procedures are completed.

jQuery(function($) { $('button').click(function() { var status = 0; function incStatus() { status++; if (status === 2) console.log('End process'); } $('.anim').fadeToggle(500, function() { console.log('End animation'); incStatus(); }); setTimeout(function() { console.log('End ajax'); incStatus(); }, 300); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Click</button> <div class="anim">Animation</div>

  • Well, I was looking for various treatments, but I didn’t think of the called function of the counter at all. Thank you - grl