jQuery Callback Functions

views

A+A-

PrintEmail

Chúng ta tiếp tục về các bài học jQuery từ cơ bản đến nâng cao tại LaiXe.Xyz. Bài viết này giúp các bạn tìm hiểu jQuery Callback Functions là gì? và được sử dụng như thế nào ?

Các bạn đang xem bài viết thuộc bài học về jQuery Effects - hiệu ứng jQuery

jQuery Callback Functions là gì?

Sau khi một hiệu ứng xảy ra và hoàn thành, thì hàm sẽ được thực thi ta gọi đó là một callback functions
Trong javascript (jQuery cũng vậy) thì các câu lệnh được thực thi từng dòng một. Tuy nhiên, đối với các hiệu ứng, dòng mã tiếp theo có thể được chạy ngay cả khi hiệu ứng chưa kết thúc. Điều này có thể tạo ra những lỗi không mong muốn. Để ngăn chặn điều này, các bạn có thể tạo ra một Callback Functions.
Để hiểu và phân biệt được tình huống xảy ra lỗi, bạn hãy xem 2 ví dụ dưới đây

Các bạn hãy xem code thực hiện như sau cho hiệu ứng 1:

  $("#btn1").click(function(){
    $("#animate1").animate({height: 300}, 1000);
    $("#animate1").animate({width: 300}, 1000);
    $("#animate1").css("background","blue");
    $("#animate1").animate({width: 100}, 1000);
    $("#animate1").animate({height: 100}, 1000);
  });

Ở đoạn code trên, các bạn thấy chúng ta set background màu xanh ở dòng code $("#animate1").css("background","blue"); (background không thể set ở phương thức animate() như những thuộc tính khác)
Tuy nhiên, ngay khi bạn click vào button thì đối tượng lập tức đổi sang màu xanh. Ở đây không hề có sự chờ đợi hai hiệu ứng animate trên hoàn thành, mà nó sẽ thực hiện luôn dòng code tiếp theo

Các bạn hãy xem code thực hiện như sau cho hiệu ứng 2:

  $("#btn2").click(function(){
    $("#animate2").animate({height: 300}, 1000);
    $("#animate2").animate({width: 300}, 1000,
    function(){
      $("#animate2").css("background","blue");
     }
   );
    $("#animate2").animate({width: 100}, 1000);
    $("#animate2").animate({height: 100}, 1000);
  });

Đối với ví dụ này, các bạn có thể thấy việc set background màu xanh được thực hiện sau khi hiệu ứng thứ 2 hoàn thành, và nó được đặt trong một hàm thuộc hiệu ứng animate() thứ 2. Chúng ta gọi đó là một jQuery callback Functions

Cú pháp sử dụng

Syntax

jQuery Callback được sử dụng như sau:

$(selector).hide(speed,callback)

Chẳng hạn như ví dụ ở trên:

$("#animate2").animate({width: 300}, 1000, function(){
      $("#animate2").css("background","blue");}
   );

hoặc

$("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });

Thử code »

Chuyên Mục : Học jQuery jQuery Callback Functions jQuery effect method jQuery Effects