Hàm Callback Là Gì

  -  

Trong bài này chúng ta sẽ tìm hiểu callback trong javascript, quá đó sẽ giúp bạn hiểu khái niệm callback function là gì, và cách hoạt động của callback function trong javascript.

Bạn đang xem: Hàm callback là gì

*


*

Hàm trong javascript được coi là first-class objects, điều này có nghĩa hàm là một object nên ta có thể sử dụng nó giống như các object bình thường khác. Ta có thể lưu trữ hàm trong một biến, truyền tham số là một hàm, return một hàm, tạo function trong một hàm - hay còn gọi là closure function..

Mình nói những điều này chắc các bạn nghĩ mình đang chém gió, nhưng thực ra nó có liên quan đến trong bài này đấy. Chi tiết thế nào thì hãy cùng mình tìm hiểu ngay nhé.

1. Callback function là gì?

Hiểu đơn giản thì hàm callback là một hàm sẽ được gọi bởi một hàm khác. Hiểu phức tạp hơn thì callback một hàm A được truyền vào hàm B thông qua các tham số của hàm B. Bên trong hàm B sẽ gọi đến hàm A để thực hiện một chức năng nào đó.

Bài viết này được đăng tại


function A(){ // code}// Hàm B có một tham số callbackfunction B(callback){ callback();}// Gọi hàm B và truyền tham số là hàm AB(A);
Hàm trong javascript là một object nên ta có thể truyền hàm này vào hàm khác dưới dạng một tham số.

Javascript hỗ trợ lập trình hướng sự kiện và bất đồng bộ nên callback function đóng vai trò rất quan trọng. Bạn sẽ truyền callback function vào các hàm xử lý sự kiện và hàm xử lý bất đồng bộ đó.

Sau đây là một ví dụ đơn giản về callback function trong jQuery, Trong ví dụ này thì phương thức click có một tham số truyền vào, và đó là một function.


$("#test").click(function(){ // đây là callback function});

Một ví dụ khác về hàm setTimeout, đây cũng là một hàm cho phép bạn truyền một callback function.


setTimeout(function(){ // day la callback function}, 200);

Việc sử dụng callback function phải hết sức cẩn thận, bạn phải tuân thủ đúng nguyên tắc mà hàm đó đưa ra, có hàm sẽ truyền thêm tham số cho hàm callback và có hàm thì không. Sau đây là một ví dụ về hàm forEach, hàm này sẽ có tác dụng lặp một mảng và có hai tham số callback function. Mỗi vòng lặp sẽ truyền hai tham số vào hàm cakback function, tham số thứ nhất đó là giá trị của phần tử đang lặp, tham số thứ hai đó là vị trí (index) của phần tử đó.


// Mảng var keywords = <"Cuong", "dnppower.com.vn", "Học lập trình", "thehalfheart">;​// Lặp qua từng phần tử và xử lý trong hàm callbackkeywords.forEach(function (eachName, index){ console.log(index + 1 + ". " + eachName);});

Ok bây giờ chắc hẳn bạn đã biết callback function là gì rồi phải không nào, nếu vậy thì ta qua phần 2 tìm hiểu cách hoạt động của nó nhé.

2. Cách Callback Function hoạt động

Một hàm hỗ trợ callback function thì chắc chắn trong code xử lý của nó sẽ có gọi đến để thực thi hàm callback đó, nhưng vấn đề nó gọi tại vị trí nào trong hàm là điều chúng ta không hề biết, trừ khi chúng ta tự viết nó. Như ở phần callback là gì mình có đưa ra một số ví dụ về truyền tham số cho callback function, các tham số này sẽ phụ thuộc vào hàm cha (hàm xử lý chính), nếu hàm cha cho phép bạn truyền 3 tham số thì bạn chỉ được truyền 3 tham số, nếu bạn truyền nhiều hơn thì cũng không có tác dụng gì.

Để các bạn dễ hiểu thì mình sẽ tự viết một hàm hỗ trợ callback function, bạn hãy xem kỹ ví dụ này nhé.


// Hàm tạo chuỗi mật khẩufunction createPassword(callback) { return callback("dnppower.com.vn");}// Sử dụngvar password = createPassword(function (secret_key) { return secret_key;});alert(password);

Nếu bạn để ý kỹ hơn thì callback function là một closure function bởi hàm closure sẽ được định nghĩa bên trong một hàm, mà callback function lại là một hàm và nó được xử lý bên trong một hàm khác (đúng với định nghĩa closure), chỉ có một điều khác đó là hàm closure được truyền vào thông qua tham số.

Xem thêm: Thánh Chế Ảnh Chế Người Phán Xử " Nói Câu Khiến Fan Ronaldo Sướng Tê Người

3. Nguyên tắc khi thực hiện callback function

Khi bạn tự viết một hàm có sử dụng tham số là một callback function thì cần chú ý một số vấn đề như sau.

Phải chắc chắn tham số truyền vào là một function

Điều này rất quan trọng bởi nếu bạn không kiểm tra giá trị mà người dùng truyền vào là một #function thì bạn không thể thực thi được, đây là sự khác biệt giữa một lập trình viên non kinh nghiệm và nhiều kinh nghiệm. Xem ví dụ dưới đây để hiểu về cách kiểm tra.


function createPassword(callback) { if (typeof callback !== "function"){ alert("Bạn phải truyền vào là một function"); return false; } // do something}

Thông qua ví dụ này ta thấy để kiểm tra một biến có phải là function hay không thì ta sử dụng hàm typeof, nếu typeof có giá trị là "function" thì đó là một function.

Cẩn thận với this khi hàm callback nằm trong object

Hàm được xây dựng trong Object là hàm được định nghĩa thông qua key của object và giá trị của key là một hàm. Trong ví dụ này hàm setName được xây dựng bên trong object domainInfo.


var domainInfo = { name : "dnppower.com.vn", setName : function(name){ this.name = name; }};

Theo đúng nguyên tắc thì hàm callback là một hàm đơn phương nên khi bạn sử dụng từ khóa this trong hàm thì nó sẽ hiểu this lúc này chính là đối tượng Window Object, vì vậy cho dù bạn định nghĩa hàm callback nằm trong một object thì không thể truy cập đến dữ liệu của object thông qua từ khóa this.

Bạn hãy xem đoạn code sử dụng hàm setName là một callback function dưới đây để hiểu rõ hơn.

XEM DEMO


// Object chứa hàm callbackvar domainInfo = { name : "dnppower.com.vn", setName : function(name){ // giá trị này sẽ không có tác dụng với key name trong object này // nếu như ta sử dụng nó là một callback function this.name = name; }};// Hàm có tham số callbackfunction test(callback){ callback("Nguyễn Văn Cường");}// Gọi đến hàm và truyền hàm callback vàotest(domainInfo.setName);// Vẫn kết quả cũ dnppower.com.vn, tức là hàm callback setName đã ko tác động// gì tới thuộc tính namedocument.write(domainInfo.name); // Xuống hàngdocument.write("");// kết quả nguyễn văn cường, tức đối tượng window đã tự tạo ra một key name // và giá trị của nó chính là giá trị ta đã sét trong hàm setName// => this chính là window objectdocument.write(window.name);

Phần demo này mình đã giải thích trong code rồi nên mình không giải thích gì thêm.

Khắc phục this khi hàm callback nằm trong object

Ở phần trên mình đã đưa ra lưu ý khi sử dụng this trong hàm callback thì this sẽ trỏ tới đối tượng window chứ không phải đối tượng chứa hàm callback, vậy có cách nào khắc phục tình trạng này không? Có đấy, chúng ta sẽ sử dụng phương thức apply của hàm callback. Cú pháp như sau:


// Trước đâycallback(var1, var2, ...);// Bây giờcallback.apply(callbackObject, );

Nếu ta sử dụng cú pháp này thì từ khóa this sẽ trỏ tới đối tượng callbackObject chứ không phải là window object. Sau đây là đoạn code khắc phục ở ví dụ phía trên.

XEM DEMO


// Object chứa hàm callbackvar domainInfo = { name : "dnppower.com.vn", setName : function(name){ this.name = name; }};// Hàm có tham số callbackfunction test(callback, callbackObject){ var name = "Nguyễn Văn Cường"; callback.apply(callbackObject, );}// Gọi đến hàm và truyền hàm callback vàotest(domainInfo.setName, domainInfo);// Kết quả: Nguyễn Văn Cườngdocument.write(domainInfo.name);

Ngoài phương thức apply thì bạn cũng có thể sử dụng phương thức call để thay thế.

Multiple Callback Functions

Bạn có thể tạo ra một hàm có nhiều calback function bằng cách tạo ra nhiều tham số và mỗi tham số là một callback function. Xem ví dụ khi xử lý ajax bằng jQuery dưới đây.


function successCallback() { // Do something}​​function successCallback() { // Do something}​​function completeCallback() { // Do something}​​function errorCallback() { // Do something}​$.ajax({ url :"https://dnppower.com.vn", success :successCallback, complete:completeCallback, error :errorCallback});

4. Lời kết

Trong bài mình đã giới thiệu khái niệm callback function là gì rồi nhỉ :) nó cũng tương đối đơn giản và mình tin chắc rằng các bạn đã sử dụng rất nhiều nhưng không biết đó là callback function, nhất là khi sử dụng thư viện jQuery.

Xem thêm: Cheat Game Android Không Cần Root Máy, Tải Ứng Dụng Mod Game Không Cần Root Cho Android

Khi nói tới callback function thì ta thường nghĩ ngay tới từ khóa callback hell. Đáng lẽ ra mình trình bày trong bài này luôn, tuy nhiên vì bài hơi dài nên mình sẽ trình bày nó ở một bài khác gần đây. Hẹn gặp lại các bạn ở bài tiếp theo nhé.


Bài trước Bài tiếp


Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...



Cách gộp hai object javascript lại với nhau



Cách lấy chiều dài của object trong Javascript



Hướng dẫn giải phương trình bậc 1 bằng Javascript


Cách dùng nextSibling trong javascript


Cách dùng insertAdjacentHTML trong javascript


Cách dùng innerHTML trong Javascript


Cách dùng insertBefore trong javascript


Cách dùng insertAfter trong Javascript


Cách dùng parentNode trong Javascript


Cách dùng parentElement trong Javascript


Tính tổng các phần tử trong mảng javascript


Tính tổng hai số bằng Javascript (cộng hai số)


Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…


Cách kiểm tra số nguyên âm trong javascript


Cách kiểm tra số nguyên dương trong javascript


Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..


Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…


Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt


Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…


WORDPRESS
HTML Templates
Theme WordPress
Plugin WordPress
Lập trình WordPress
Thủ thuật WordPress
WEB HOSTING
Quản trị Linux
Thủ thuật Hosting
Kiến thức Domain
WEB FRONTEND
Javascript
AngularJS
jQuery
jQuery Mobile
HTML & CSS
Bootstrap
TypeScript
SASS CSS
VueJS
NestJS
Học ReactJS
WEB BACKEND
PHP
Codeigniter
Laravel
Phalcon
OpenCart
NodeJS
Blogspot
DATABASE
Học MySQL
Học MongoDB
CSDL căn bản
Học Oracle
Học SQL Server
Học SQLite
PROGRAMMING
Python
Java
Pascal
Học C#
Học Ruby
Học Swift
C / C++
Kotlin
Golang
Giải thuật
Visual Basic
MOBILE DEV
React Native
Học iOS
Android
CÔNG CỤ
Học Git
Testing
Control Panel
Dev Tool
FFmpeg
TIN HỌC
Excel
Word
PowerPoint
Access
Photoshop
MÔN HỌC
Tiếng Anh
Toán
Tiếng Nhật
Văn học
VIDEO
CSS Lab
PHP Lab
Giới thiệu
Giới thiệu Liên hệ Chính sách Điều khoản
Liên kết
Thabet ek88bet.asia thabet.ai SP666 Fun 567Live MMLive QQLive Hotlive
Link hay
BETVISA KÍCH NGAY TẶNG 100K miễn phí TÝ BỐI - TẶNG NGAY 50K khuyến mãi khủng

tải app 567 live show

Trang chủ chính thức Ae888

Trang chủ chính thức Thabet

Nhà cái https://kubet8.us/

ĐK THABET nhận ngay 628k

kubet W88 kucasino.dev
Liên kết
kèo nhà cái KUBET88 f8bet Kubet88fun Ku casino KUBET Casino ae888 Ku casino cfun68

*