Führen Sie die jQuery-Funktion aus, nachdem der erste Vorgang abgeschlossen ist.

Question

Ich habe eine Seite erstellt, auf der ich mehrere Funktionen eingerichtet habe, aber mit dem Timing davon geblieben bin, wenn Sie das Seitenbeispiel hier in JSFiddle sehen.

Wenn Sie die Seite öffnen, wird zuerst ein Loader ausgeführt und wenn der Loader fertig ist, gibt es mehrere Kästchen, die nacheinander angezeigt werden, aber im Moment nicht, Loader wird geladen und dann im nächsten Schritt Wenn zentrierte Spalten nacheinander angezeigt werden sollen, werden die ersten vier Spalten standardmäßig geladen und dann die anderen div nacheinander.

Meine Frage ist, wie kann ich eine Funktion ausführen und eine andere Funktion ausführen, sobald der vorherige abgeschlossen ist.

Für Lader habe ich folgendes:

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

Für div zeigt einen nach dem anderen im nächsten Schritt ich den folgenden Code haben:

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

Answer 1

I trigger und on für diese Art von Dingen verwenden . Du hattest viel Code, sorry, ich wollte das alles nicht lesen, aber das ist ein vereinfachtes Beispiel.

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>

Hinweis: Um es einfach halten wir auslösen und hören auf $(document), die es zu halten wirklich nur einfach ist. Ein besserer Ansatz wäre es, ein Wrapper-Element zu haben, und dann können Sie genau dasselbe (trigger and listen) nur für dieses Element und nicht für das gesamte Dokument tun. You can find more details on the jQuery API .trigger()