第一次完成後執行jQuery函數

Question

如果您在JSFiddle處看到頁面示例，我已經創建了一個頁面，我已經完成了多個功能，但仍停留在它的時間點。

當你打開頁面時，它將首先運行一個加載程序，當加載程序完成時，有多個框顯示一個接一個，但目前沒有發生，Loader加載正常，然後在下一步中心列必須逐一顯示，前四列默認加載，然後其他div加載一個一個。

我的問題是，我如何執行一個函數，並執行另一個功能，一旦前一個完成。

裝載機我有以下幾點：

//--------- 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); 

對於下一步我有下面的代碼顯示一個DIV之一：

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

Answer 1

我用trigger和on對於這種事情。你有很多代碼，很抱歉，我不想閱讀所有這些，但這是一個簡單的例子。

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

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

 
     /* then trigger(call) another function */ 
 
     $(document).trigger('hello-action'); 
 
    }; 
 
    
 
    var hello = function() { 
 
    \t $('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>

注：爲了簡單起見，我們觸發和$(document)聽這真的只是保持簡單。更好的方法是創建一個包裝元素，然後你可以在該元素上完全相同（觸發和監聽），而不是在整個文檔上。 You can find more details on the jQuery API .trigger()