首先完成后执行jQuery函数

Question

I have created a page where I have multiple functionality done but stuck with timing of it, if you see the page example here in JSFiddle .

When you open the page, it will first run a loader and when the loader is complete there are multiple boxes, which is showing one by one but in currently its not happening, Loader is loading fine and then in the next step where centered columns has to appear one by one, the first four columns loads by default and then other div loads one by one.

My question is, how can I execute a function and execute another another function once the previous is complete.

For loader I have the following:

  //--------- process bar animation
  var showText = function (target, message, index, interval) {   
    if (index < message.length) {
      $(target).append(message[index++]);
      setTimeout(function () { showText(target, message, index, interval); }, interval);
    }
  }

  var width = 100,
      perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
      EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
      time = parseInt((EstimatedTime/1000)%60)*100;

      showText("#msg", "Welcome to the Company Group", 0, width); 

  // Loadbar Animation
  $(".loadbar").animate({
    width: width + "%"
  }, time);

  // Loadbar Glow Animation
  $(".glow").animate({
    width: width + "%"
  }, time);

  // Percentage Increment Animation
  var PercentageID = $("#precent"),
          start = 0,
          end = 100,
          durataion = time;
          animateValue(PercentageID, start, end, durataion);

  function animateValue(id, start, end, duration) {

      var range = end - start,
        current = start,
        increment = end > start? 1 : -1,
        stepTime = Math.abs(Math.floor(duration / range)),
        obj = $(id);

      var timer = setInterval(function() {
          current += increment;
          $(obj).text(current + "%");
        //obj.innerHTML = current;
          if (current == end) {
              clearInterval(timer);
          }
      }, stepTime);
  }

  // Fading Out Loadbar on Finised
  setTimeout(function(){
    $('.preloader-wrap').fadeOut(300);
    $('.loader-wrap').fadeOut(300);
    $('.main-wrapper').fadeIn(300);
    $('body').addClass('bg');
  }, time);

For showing div one by one in next step I have the following code:

$(".column-wrapper").each(function(index) {
var $this = $(this);
setTimeout(function () { $this.addClass("show"); }, index * 1000);
});

Answer 1

I use trigger and on for those kind of things. You had a lot of code, so sorry, I didn't want to read all of that but this is a simplified example.

https://jsfiddle.net/2d6p4L6k/1/

 $(document).ready(function(){ var action = function(){ $('div.one').css('background-color', 'green'); /* do whatever you want to do */ /* then trigger(call) another function */ $(document).trigger('hello-action'); }; var hello = function() { $('div.two').css('background-color', 'fuchsia'); }; /* just listen if anything triggers/calls "hello-action" */ /* if so call function named hello */ $(document).on('hello-action', hello); setTimeout(action, 1500); }); 

 div { width: 50px; height: 50px; background-color: orange; margin: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one">one</div> <div class="two">two</div> 

Note: To keep it simple we trigger and listen on $(document) which is really just to keep it simple. A better approach would be to have a wrapper element, and then you can do exactly the same (trigger and listen) just on that element and not on the entire document. You can find more details on the jQuery API .trigger()