javascript - jquery 一个接一个地运行函数

Question

我有四个函数，包括 jQuery 动画和其他东西。我希望他们在另一个完成后立即运行。我看了这么多问题和答案，我尝试了这么多事情(延期、 promise 、回调等)，但没有运气。通常结果是它们是否同时工作，或者第二个不运行。我有什么想法可以按顺序运行它们吗？

这是我的功能:

function hides(){
  $('#whiteLogo').hide('600');
  $('div.form').hide('600');
}

function moveTop(){
  $('nav').animate({
    'bottom': 'initial',
    'top': '0px'
  }, 600);
  $('.gradient').animate({
    'bottom': 'initial',
    'top': '-10px'
  }, 600);
}

function destroys(){
  $('.gradient').hide();
}

function content(){
  $('header').after('<section id=\'content\'>\t<div id=\'icons\'>\t</div>\t<section id=\'summary\'>\t\t\t</section>\t<section id=\'bulletin\'>\t\t</section></section>');
}

更新:我认为这与此无关，但根据要求，这是我的 HTML:

<header>
  <nav>
    <a href='#' class='linkPicture left'>
      <img src='../img/incnetWhite.png' alt='incnetWhite' id='headerLogo'>
    </a>
    <a href='../checkin/index.php' class='linkWord left' id='checkinLink'>
      Checkin
    </a>
    <a href='../weekend/index.php' class='linkWord left' id='weekendLink'>
      Weekend Departures
    </a>
    <a href='../etut/index.php' class='linkWord left' id='etutLink'>
      Etut Reservations
    </a>
    <div class='linkWord left more' id='moreLink'>
      More
      <img src='../img/header-drop.png' alt='drop' class='dropimg'>
      <div class='dropMenu more' id='moreMenu'>
        <a href='../pool/index.php' class='dropWord left' id='poolLink'>
          Pool Reservations
        </a>
        <br>
        <a href='../admin/index.php' class='dropWord left' id='adminLink'>
          Admin Tools
        </a>
      </div>
    </div>
    <div href='#' class='linkWord right personal' id='personalLink'>
      Your Name 
      <img src='../img/header-drop.png' alt='drop' class='dropimg'>
      <div class='dropMenu personal' id='personalMenu'>
        <a href='../core/settings.php' class='dropWord left' id='settingLink'>
          Change Settings
        </a>
        <br>
        <a href='../profiles/edit.php' class='dropWord left' id='profileLink'>
          Profile Settings
        </a>
        <br>
        <a href='../core/hiring.php' class='dropWord left' id='hiringLink'>
          Apply to INÇNET
        </a>
        <br>
        <a href='../core/about.php' class='dropWord left' id='aboutLink'>
          About Us
        </a>
        <br>
        <a href='../core/logoff.php' class='dropWord left' id='logoffLink'>
          Sign Out
        </a>
      </div>
    </div>
  </nav>
</header>   
<div class='form'>
    <form method='POST'>
        <span id='welcome'>Welcome!</span>
        <!--<label class='fieldname' id='username'>Username:</label>-->
        <input type='text' name='username' placeholder='username' size='10'>
        <br>
        <!--<label class='fieldname' id='password'>Password:</label>-->
        <input type='password' name='password' placeholder='&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;' size='10'>
        <br>
        <span id='remember'>
            <input type='checkbox' name='remember'>
            <label class='fildname' id='rememberme'>Remember Me</label>
        </span>
        <br>
        <span id='error'>
        </span>
        <input type='submit' name='signin' value='Sign In' id='signin'>
    </form>
</div>

Answer 1

据我所知，您想按顺序对多个元素执行事件。通过一些尝试，我们可以利用 jQuery 的 Deferred 并制定解决方案 (view JSFiddle) 比如:

function runDeferred() {
    var args = arguments;
    if(args.length) {
        var next = Array.prototype.shift.call(args);
        $.when(next()).done(function() {
            runDeferred.apply(this, args);
        });
    }

这个方法可以接受一个方法列表，并连续调用它们。这些方法本身需要返回我们希望等待的元素的 jQuery 对象。下面是这种方法的示例:

function fadeBar() {
    return $("#bar").fadeIn(1000).animate({
        "font-size": "2em"
    }, 1000);
}

下面是您如何组合它们:

runDeferred(fadeFoo, fadeBar, fadeZulu);