javascript - 首先完成后执行jQuery函数

如果您在JSFiddle中看到了页面示例，那么我已经创建了一个页面，其中我完成了多项功能，但仍受其时间限制。

当您打开页面时，它将首先运行一个加载器，并且在加载器完成时，会有多个框，一个一个地显示，但是目前没有发生，加载器正在加载，然后在下一步中居中的列要一一显示，默认情况下前四列会加载，然后其他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);
});

最佳答案

我将trigger和on用于此类情况。您有很多代码，很抱歉，我不想阅读所有内容，但这只是一个简化的示例。

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>

注意：为简单起见，我们触发并监听$(document)，这实际上只是为了使其简单。更好的方法是拥有一个wrapper元素，然后可以仅对该元素而不是整个文档执行完全相同的操作（触发和监听）。 You can find more details on the jQuery API .trigger()

关于javascript - 首先完成后执行jQuery函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39116024/