Sanjeev K Sanjeev K -4 years ago 154
CSS Question

Execute jQuery function after first is complete

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) {
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
width: width + "%"
}, time);

// Loadbar Glow Animation
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) {
}, stepTime);

// Fading Out Loadbar on Finised
}, 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 Source

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.

    var action = function(){
    	$('').css('background-color', 'green');
        /* do whatever you want to do */

        /* then trigger(call) another function */ 
    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=""></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()

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download