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/

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意：为了简单起见，我们触发并监听$(document)，这只是为了保持简单。一个更好的方法是拥有一个包装元素，然后你就可以在该元素上完全相同（触发和监听），而不是整个文档。 You can find more details on the jQuery API .trigger()

首先完成后执行jQuery函数

1 个答案: