Hàm Callback trong jQuery - 06 - Giải pháp website, App & CRM

Hàm Callback trong jQuery – 06

Một hàm Callback sẽ được thực thi sau khi hiệu ứng jQuery hiện tại đã thực hiện xong 100%.

Tại sao lại cần dùng hàm Callback?

Trong JavaScript, các câu lệnh sẽ được thực thi theo thứ tự từ trên xuống dưới sau khi câu lệnh phía trên đã hoàn thành xong. Tuy nhiên, đối với các hiệu ứng của jQuery thì các câu lệnh phía bên dưới vẫn có thể thực thi mặc dù hiệu ứng jQuery đã thực thi xong hay chưa.

Đối với các hiệu ứng thiết lập thười gian quá dài (chẳng hạn như 5 giây, 10 giây). Nếu không dùng hàm Callback mà bạn lại muốn câu lệnh phía dưới thực thi sau khi hiệu ứng jQuery hoàn thành, thì đó là điều không thể, dẫn đến chức năng hoạt động không như ý muốn.

Do đó, để ngăn chặn điều này, bạn cần dùng đến hàm callback.

Một hàm callback sẽ được thực thi sau khi hiệu ứng jQuery hoàn thành 100%.

Một cú pháp điển hình: $(selector).hide(speed,callback);

Ví dụ:

Đoãn mã dưới đây bao gồm hai ví dụ, một ví dụ KHÔNG sử dụng hàm callback, một ví dụ CÓ sử dụng hàm callback

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
   $(document).ready(function(){
      $("input[value='radio1']").click(function(){
         $("#abc").show(    function(){alert("HIỆN");}    );
      })
      $("input[value='radio2']").click(function(){
         $("#abc").hide(    function(){alert("ẨN");}    );
      })
   })
</script>
</head>
<body>
  <p><input type="radio" name="abc" value="radio1" checked>Hiện</p>
  <p><input type="radio" name="abc" value="radio2">Ẩn</p>
  <div style="background-color:brown;height:200px" id="abc"></div>
</body>
</html>