Buzz
Trong bài học này, Mytour sẽ giới thiệu cách sử dụng hàm callback trong jQuery. Đồng thời, bạn cũng có thể tham khảo thêm một số bài học khác về jQuery trên trang web của chúng tôi để hiểu rõ hơn về Chaining trong jQuery.
Khám phá hàm callback trong thư viện jQuery
Hàm Callback trong jQuery
Mỗi lệnh trong JavaScript thường được thực thi tuần tự. Tuy nhiên, khi sử dụng hiệu ứng jQuery, có thể xảy ra tình trạng mã tiếp theo thực thi trong khi hiệu ứng trước đó vẫn đang chạy.
Để tránh vấn đề này, jQuery cung cấp chức năng gọi là hàm callback cho mỗi phương thức hiệu ứng.
Hàm callback trong jQuery thường được kích hoạt sau khi hiệu ứng hiện tại hoàn tất. Hàm này thường được truyền như một đối số cho các phương thức hiệu ứng và xuất hiện cuối cùng trong danh sách đối số.
Ví dụ về cú pháp cơ bản của phương thức hiệu ứng slideToggle() trong jQuery với hàm callback như sau:
$(selector).slideToggle(duration, callback);
Trong Ví dụ 1:, lệnh slideToggle() và alert() được sử dụng. Nếu chúng ta click nút kích hoạt mà không chờ hiệu ứng chuyển đổi slide hoàn tất, một cảnh báo sẽ xuất hiện trên màn hình:
Kết quả đầu ra sẽ hiển thị như sau:
Ví dụ 2: Trong ví dụ này, chúng ta đặt lệnh alert() trong hàm callback của phương thức slideToggle(). Khi click nút kích hoạt, cảnh báo sẽ xuất hiện sau khi hiệu ứng chuyển đổi slide hoàn tất:
Kết quả đầu ra sẽ hiển thị như sau:
Chúng ta cũng có thể chỉ định hàm callback cho các phương thức hiệu ứng jQuery khác như show(), hide(), fadeIn(), fadeOut(), animate(), ... .
Lưu ý: Nếu áp dụng phương thức hiệu ứng cho nhiều phần tử, hàm callback sẽ thực thi lần lượt cho từng phần tử được chọn thay vì thực thi đồng thời cho tất cả các phần tử.
Một ví dụ: Trong ví dụ này, chúng ta minh họa cách hàm callback được thực thi tuần tự cho mỗi phần tử được chọn:
Kết quả đầu ra sẽ giống như sau:
Trong ví dụ này, kết quả đầu ra sẽ hiển thị thông báo giống nhau 2 lần cho các phần tử h1 và p khi click nút kích hoạt.
Vậy là bạn đã cùng Mytour khám phá về hàm callback trong jQuery. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết nhé.
Trong bài học tiếp theo, Mytour sẽ đưa đến bạn những kiến thức mới về các phương thức Getter và Setter trong jQuery để bạn có thêm nhiều cơ hội nâng cao kỹ năng của mình.
