การดำเนินการหลังจากเอฟเฟกต์สิ้นสุดลงใน jQuery

บางครั้งคุณอาจจำเป็นต้องดำเนินการบางอย่างหลังจากที่เอฟเฟกต์สิ้นสุดลง ตัวอย่างเช่น เมื่อคลิกปุ่ม บล็อกบางส่วนควรซ่อนอย่างราบรื่น และหลังจากที่มันซ่อนอย่างสมบูรณ์แล้ว จึงจะต้องแสดงบางสิ่งบนหน้าจอ

หากเขียนโค้ดบรรทัดต่อบรรทัดโดยปกติ - องค์ประกอบยังซ่อนไม่ทันเสร็จ บรรทัดถัดไปก็เริ่มทำงาน - และผลลัพธ์ที่ได้จะไม่เป็นไปตามที่เราต้องการ กดปุ่ม - องค์ประกอบเริ่มซ่อน และข้อความบนปุ่มจะเปลี่ยนทันที

ดูตัวอย่างต่อไปนี้ สมมติว่าเรามีโค้ด HTML ดังนี้:

html<button id="hide">hide</button>
<div id="elem">text...</div>

สำหรับโค้ดนี้ มี CSS กำหนดดังนี้:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

โค้ด Javascript มีลักษณะดังนี้:

javascript$('#hide').click(function() {
  $('#elem').hide(1000);
  $('#hide').html('hidden');
});

เพื่อหลีกเลี่ยงปัญหาดังกล่าว ในทุกเมธอด ที่ทำงานกับแอนิเมชันและเอฟเฟกต์จะมี พารามิเตอร์เสริมนี้ ซึ่งเราสามารถ ส่ง callback function ไปได้ ซึ่งจะทำงานหลัง แอนิเมชันสิ้นสุดลง ในกรณีของเรา เราส่ง callback function ไปยังเมธอด hide, และในเนื้อหาของฟังก์ชันนี้ เราเปลี่ยนข้อความบนปุ่ม:

javascript$('#hide').click(function() {
  $('#elem').hide(1000, function() {
    $('#hide').html('hidden');
  });
});