Mọi người yêu thích: thời gian video khái niệm! Gọi lại là một khái niệm quan trọng trong JavaScript. Chúng là các hàm được gọi khi một hành động đã chạy xong. Sau đó cho mượn cấu trúc và thời gian cho mã của chúng tôi.
Lấy ví dụ như hình ảnh động mà chúng tôi đã sử dụng trong video trước. Hoạt ảnh cần thời gian để chạy. Điều gì sẽ xảy ra nếu bạn muốn có điều gì đó khác xảy ra ngay khi hoạt ảnh đó kết thúc? Bạn có phải làm một setTimeoutcho cùng độ dài với hình ảnh động? Không. jQuery cung cấp cho chúng ta các hàm gọi lại được sử dụng cho mục đích đó.
Chúng thường là một tham số bổ sung mà chúng tôi chuyển cho phương thức. Trong trường hợp hoạt ảnh, chúng tôi truyền một hàm làm tham số cuối cùng. Đó là hàm gọi lại, và sẽ được gọi khi hoạt ảnh hoàn tất.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Điều đó có lẽ hơi thú vị một chút, nhưng về cơ bản chúng tôi đang làm:
.animate(a, b)Đâu alà một đối tượng của các thuộc tính và giá trị, và blà một hàm gọi lại.
Nhưng chúng ta đã biết từ video cuối cùng rằng hoạt ảnh cũng có thể có tham số thời gian chỉ định thời lượng hoạt ảnh sẽ diễn ra. Nó sẽ đi đâu? Đó là một tham số tùy chọn, giống như hàm gọi lại. Nếu chúng tôi muốn sử dụng nó, chúng tôi sẽ đặt nó ngay ở giữa, về cơ bản:
.animate(propertiesObject, duration, callback);Và có một tham số tùy chọn khác, một chuỗi mà chúng ta có thể chuyển để chỉ định giá trị nới lỏng.
.animate(propertiesObject, duration, easing, callback);jQuery thực sự thú vị và thông minh về các tham số tùy chọn đó. Nếu bạn bỏ đi hai phần giữa và chỉ truyền lệnh gọi lại, nó có thể cho biết những gì bạn đang truyền là một hàm chứ không phải một số hay chuỗi, vì vậy nó biết bạn có nghĩa là một hàm gọi lại. Bạn không phải chuyển các giá trị không có thật hoặc bất cứ thứ gì. Đó chỉ là thiết kế API tốt!
Khi bạn nhìn vào tài liệu jQuery, họ hiển thị nó như thế này:
.animate (thuộc tính (, thời lượng) (, nới lỏng) (, hoàn thành))
Sau đó, ngay sau khi giải thích các loại dự kiến.
Nhưng dù sao, hãy quay lại với các cuộc gọi lại. Bạn có thể nhận được khá lồng vào nhau. Hãy tưởng tượng đặt một hoạt ảnh khác trong hàm gọi lại và hoạt ảnh đó có lệnh gọi lại của riêng nó. Điều đó hoàn toàn hợp lý, vì bạn có thể muốn tạo hoạt ảnh nhiều bước. Bạn chỉ cần giữ tổ chức.
Xem Bút 450c5810be27a9a8946cb8012cbd1213 của Chris Coyier (@chriscoyier) trên CodePen
Chúng tôi chỉ sử dụng hoạt ảnh làm ví dụ ở đây. Có lẽ một công dụng phổ biến hơn của các hàm gọi lại là Ajax. Ajax là khi trình duyệt gọi một tài nguyên khác mà không làm mới trang. Điều đó có thể mất một khoảng thời gian hoàn toàn không xác định. Nó phụ thuộc vào băng thông và độ trễ cũng như kích thước của tệp và các điều kiện lỗi và tất cả các loại nội dung. Bạn có thể không thể làm bất cứ điều gì với yêu cầu Ajax đó cho đến khi bạn nhận lại được thứ gì đó hoặc có thêm thông tin. Các hàm gọi lại là hoàn hảo cho điều đó và chúng ta sẽ đi sâu vào điều đó sau.