การเรียกกลับของ. animate () เรียกสองครั้ง jquery

เนื่องจากฉันเพิ่มscrollTop-animation บางส่วนของการโทรกลับของฉันถูกเรียกสองครั้ง:

$('html, body').animate({scrollTop: '0px'}, 300,function() {
    $('#content').load(window.location.href, postdata, function() {                 
        $('#step2').addClass('stepactive').hide().fadeIn(700, function() {
            $('#content').show('slide',800);                    
        });
    });
});

ดูเหมือนว่าจะทำซ้ำ.show()อย่างน้อยฉันก็ไม่มีความรู้สึกว่าload()หรือถูก.fadeIn()เรียกเป็นครั้งที่สองด้วย .show()ได้รับซ้ำเร็วที่สุดเท่าที่จะเสร็จสิ้นเป็นครั้งแรก การตั้งค่าความเร็วภาพเคลื่อนไหว scrollTop 0ไม่ได้ช่วยอะไรเลย!

ฉันคิดว่ามันมีบางอย่างเกี่ยวข้องกับคิวภาพเคลื่อนไหว แต่ฉันไม่สามารถหาวิธีแก้ปัญหาได้โดยเฉพาะอย่างยิ่งว่าทำไมสิ่งนี้จึงเกิดขึ้น

animateเรียกการโทรกลับหนึ่งครั้งสำหรับแต่ละองค์ประกอบในชุดที่คุณเรียกanimateใช้:

หากจัดมาที่start, step, progress, complete, done, failและalwaysเรียกกลับจะเรียกว่าบนพื้นฐานต่อองค์ประกอบ ...

เนื่องจากคุณกำลังเคลื่อนไหวสององค์ประกอบ ( htmlองค์ประกอบและbodyองค์ประกอบ) คุณจะได้รับการเรียกกลับสองครั้ง (สำหรับใครที่สงสัยว่าเหตุใดOP จึงเคลื่อนไหวสององค์ประกอบนั่นเป็นเพราะแอนิเมชั่นทำงานบนbodyเบราว์เซอร์บางตัว แต่บนhtmlเบราว์เซอร์อื่น)

หากต้องการรับการโทรกลับเพียงครั้งเดียวเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์animateเอกสารจะชี้ให้คุณทราบโดยใช้promiseวิธีการรับสัญญาสำหรับคิวภาพเคลื่อนไหวจากนั้นใช้thenเพื่อจัดคิวการโทรกลับ:

$("html, body").animate(/*...*/)
    .promise().then(function() {
        // Animation complete
    });

(หมายเหตุ: Kevin B ชี้สิ่งนี้ในคำตอบของเขาเมื่อคำถามถูกถามครั้งแรกฉันไม่ได้ทำจนกระทั่งสี่ปีต่อมาเมื่อฉันสังเกตเห็นว่ามันหายไปเพิ่มเข้าไปและ ... จากนั้นก็เห็นคำตอบของ Kevin โปรดให้คำตอบของเขา รักที่สมควรได้รับฉันคิดว่านี่คือคำตอบที่ได้รับการยอมรับฉันควรปล่อยไว้)

นี่คือตัวอย่างที่แสดงทั้งการเรียกกลับของแต่ละองค์ประกอบและการโทรกลับโดยรวม:

jQuery(function($) {

  $("#one, #two").animate({
    marginLeft: "30em"
  }, function() {
    // Called per element
    display("Done animating " + this.id);
  }).promise().then(function() {
    // Called when the animation in total is complete
    display("Done with animation");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

<div id="one">I'm one</div>
<div id="two">I'm two</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

หากต้องการรับการโทรกลับเพียงครั้งเดียวเพื่อให้ภาพเคลื่อนไหวหลายองค์ประกอบเสร็จสมบูรณ์ให้ใช้ออบเจ็กต์ที่เลื่อนออกไป

$(".myClass").animate({
  marginLeft: "30em"
}).promise().done(function(){
  alert("Done animating");
});

ดู jQuery API สำหรับรายละเอียดของสัญญาและวัตถุรอตัดบัญชี