tek4

Hàm Callback trong JavaScript

by - September. 25, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8232 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-58.png" alt="H&agrave;m Callback trong JavaScript" width="754" height="440" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ c&ugrave;ng t&igrave;m hiểu về c&aacute;c h&agrave;m Callback trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>H&agrave;m Callback trong JavaScript</h1> <p>H&agrave;m l&agrave; một khối đoạn m&atilde; thực hiện một t&aacute;c vụ n&agrave;o đ&oacute; khi được gọi. Khi ta định nghĩa cho một h&agrave;m n&agrave;o đ&oacute;, ta c&oacute; thể sử dụng lại n&oacute; trong c&aacute;c lần sau.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function vi_du(a) { &nbsp;&nbsp;&nbsp; console.log(a); } vi_du("Lập tr&igrave;nh JavaScript");</pre> <p>Kết quả:</p> <pre>Lập tr&igrave;nh JavaScript</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, một gi&aacute; trị chuỗi k&yacute; tự được truyền l&agrave;m đối số cho h&agrave;m vi_du().</p> <p>Trong JavaScript, ta cũng c&oacute; thể truyền một h&agrave;m l&agrave;m đối số cho một h&agrave;m kh&aacute;c. H&agrave;m được truyền như một đối số b&ecirc;n trong một h&agrave;m kh&aacute;c được gọi l&agrave; h&agrave;m Callback.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function vi_du(callback) { &nbsp;&nbsp;&nbsp; callback(); } function vi_du2() { &nbsp;&nbsp;&nbsp; console.log('Lập tr&igrave;nh JavaScript'); } vi_du(vi_du2);</pre> <p>Kết quả:</p> <pre>Lập tr&igrave;nh JavaScript</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, c&oacute; hai h&agrave;m được định nghĩa. Trong khi gọi h&agrave;m vi_du(), c&oacute; một đối số l&agrave; một h&agrave;m vi_du2 được truyền. H&agrave;m vi_du2() n&agrave;y ch&iacute;nh l&agrave; một h&agrave;m Callback.</p> <h2>Lợi &iacute;ch của việc sử dụng h&agrave;m Callback</h2> <p>Lợi &iacute;ch của việc sử dụng h&agrave;m Callback l&agrave; ta c&oacute; thể đợi kết quả của một lệnh gọi h&agrave;m trước đ&oacute; v&agrave; sau đ&oacute; thực hiện một lệnh gọi h&agrave;m kh&aacute;c.</p> <p>Trong v&iacute; dụ b&ecirc;n dưới đ&acirc;y, ch&uacute;ng ta sẽ sử dụng phương thức setTimeout() để minh họa về việc truyền một h&agrave;m bất kỳ (h&agrave;m do người d&ugrave;ng tự định nghĩa) l&agrave;m đối số cho một h&agrave;m kh&aacute;c (Ch&iacute;nh l&agrave; h&agrave;m setTimeout()).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function vi_du() { &nbsp;&nbsp;&nbsp; console.log('Lập tr&igrave;nh JavaScript'); } function vi_du2() { &nbsp;&nbsp;&nbsp; console.log('JavaScript'); } setTimeout(vi_du, 1000); vi_du2();</pre> <p>Kết quả:</p> <pre>JavaScript Lập tr&igrave;nh JavaScript</pre> <p>Như đ&atilde; biết, phương thức setTimeout() sẽ thực thi một khối đoạn m&atilde; sau thời gian được chỉ định. Ở đ&acirc;y, h&agrave;m vi_du() được gọi sau 1000 mili gi&acirc;y (tương đương với 1 gi&acirc;y). Trong khoảng thời gian n&agrave;y, h&agrave;m vi_du2() sẽ được thực thi trước. Đ&oacute; l&agrave; l&yacute; do tại sao chuỗi k&yacute; tự &lsquo;JavaScript&rsquo; được in trước chuỗi k&yacute; tự &lsquo;Lập tr&igrave;nh JavaScript&rsquo;.</p> <p>Tuy nhi&ecirc;n, ta c&oacute; thể thấy rằng đoạn m&atilde; tr&ecirc;n được thực thi một c&aacute;ch kh&ocirc;ng đồng bộ, h&agrave;m thứ hai được thực hiện trước so với h&agrave;m thứ nhất.</p> <p>V&iacute; dụ: Sử dụng h&agrave;m Callback.</p> <p>Trong v&iacute; dụ tr&ecirc;n, h&agrave;m thứ hai kh&ocirc;ng đợi h&agrave;m đầu ti&ecirc;n ho&agrave;n th&agrave;nh. Tuy nhi&ecirc;n, nếu ta muốn đợi kết quả của lệnh gọi h&agrave;m trước đ&oacute; trước khi c&acirc;u lệnh tiếp theo được thực thi, ta c&oacute; thể sử dụng h&agrave;m Callback.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">function vi_du(callback) { &nbsp;&nbsp;&nbsp; console.log('Lập tr&igrave;nh JavaScript'); &nbsp;&nbsp;&nbsp; callback(); } function vi_du2() { &nbsp;&nbsp;&nbsp; console.log('JavaScript'); } setTimeout(vi_du, 1000, vi_du2);</pre> <p>Kết quả:</p> <pre>Lập tr&igrave;nh JavaScript JavaScript</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, đoạn m&atilde; đ&atilde; được thực thi một c&aacute;ch đồng bộ. H&agrave;m vi_du2() được truyền l&agrave;m đối số cho h&agrave;m vi_du(). Phương thức setTimeout() sẽ thực thi h&agrave;m vi_du() sau một khoảng thời gian l&agrave; 1000 mili gi&acirc;y, tương đương với 1 gi&acirc;y. Tuy nhi&ecirc;n, h&agrave;m vi_du2() sẽ chờ việc thực thi h&agrave;m vi_du() ho&agrave;n th&agrave;nh.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: H&agrave;m Callback sẽ rất hữu &iacute;ch khi ta phải đợi một kết quả n&agrave;o đ&oacute; trong một khoảng thời gian nhất định.</span></strong></p> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về h&agrave;m Callback trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>