Đôi khi bạn cần phải thực hiện hành động sau một khoảng thời gian nhất định. Để thực hiện điều này, bạn có thể sử dụng phương thức setTimeout. Sau đây là cách khai báo và sử dụng setTimeout trong JavaScript.
Cú pháp hàm setTimeout là:
let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)Trong đó:
\nfunc|code: là hàm hoặc string mô tả code để thực thi. Cách sử dụng thông thường là hàm. Cách sử dụng string được phép nhưng không khuyến khích.delay: là thời gian trì hoãn trước khi hành động được thực hiện, tính theo mili giây. Giá trị mặc định của delay là 0.arg1, arg2,...: là danh sách các tham số truyền vào hàm.Ví dụ đoạn code sau gọi hàm sayHi sau 1 giây:
function sayHi() {\n console.log(\"Hello\");\n}\n\nsetTimeout(sayHi, 1000); // HelloVí dụ với tham số truyền vào hàm:
\nfunction sayHi(message, who) {\n console.log(`${message}, ${who}`);\n}\n\nsetTimeout(sayHi, 1000, \"Hello\", \"Alex\"); // Hello, AlexNếu tham số đầu tiên là string, JavaScript engine sẽ tạo hàm từ string đó để thực thi, ví dụ:
\nsetTimeout(\"console.log('Hello')\", 1000);Tuy nhiên, cách sử dụng string là không được khuyến khích, bạn có thể thay thế bằng arrow function như sau:
\nsetTimeout(() => console.log(\"Hello\"), 1000);Chú ý: Tham số đầu tiên là hàm, chứ không phải kết quả của việc gọi hàm, nhiều bạn hay bị nhầm lẫn như sau:
\n// gọi hàm sayHi() thay vì truyền vào hàm sayHi\nsetTimeout(sayHi(), 1000);Khi gọi hàm sayHi() như trên, kết quả của hàm sayHi() được truyền vào hàm setTimeout. Mà hàm setTimeout chỉ chấp nhận truyền vào là function. Do đó, đoạn code trên sẽ không thực hiện gì sau 1 giây.
Khi bạn gọi hàm setTimeout trong JavaScript, kết quả trả về là một số nguyên timerId - định danh cho hành động với timeout. Để hủy bỏ hành động, bạn chỉ cần gọi clearTimeout như sau:
let timerId = setTimeout(...);\nclearTimeout(timerId);Ví dụ bạn dự định gọi một hàm sau khoảng thời gian delay là 1 giây. Nhưng sau đó, bạn lại hủy bỏ hành động này:
\nlet timerId = setTimeout(() => console.log(\"sẽ không được gọi\"), 1000);\nconsole.log(timerId); // định danh cho timer\n\nclearTimeout(timerId);\nconsole.log(timerId); // timerId không đổi sau khi clearTimeoutHàm setInterval có cú pháp tương tự như hàm setTimeout:
let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)Trong đó, tất cả tham số đều có ý nghĩa giống với hàm setTimeout.
Nhưng khác với hàm setTimeout là chỉ thực hiện hành động một lần, hàm setInterval sẽ gọi hàm thường xuyên sau mỗi khoảng thời gian delay.
Để dừng hành động, bạn chỉ cần gọi hàm clearInterval(timerId).
Ví dụ sau hiển thị \"Hello\" sau mỗi 2 giây và sau đó 5 giây thì dừng lại:
// lặp lại với thời gian là 2000 ms (2 giây)\nlet timerId = setInterval(() => console.log(\"Hello\"), 2000);\n\n// sau 5 giây thì dừng lại\nsetTimeout(() => {\n clearInterval(timerId);\n console.log(\"stop\");\n}, 5000);Ngoài cách sử dụng setInterval để thực hiện một hành động lặp đi lặp lại, bạn có thể sử dụng hàm setTimeout trong JavaScript theo cách lồng nhau như sau:
/** thay vì:\nlet timerId = setInterval(() => console.log('Hello'), 2000);\n*/\n\nlet timerId = setTimeout(function sayHi() {\n console.log(\"Hello\");\n timerId = setTimeout(sayHi, 2000); // (*)\n}, 2000);Trong ví dụ trên, cứ sau mỗi 2 giây thì hàm sayHi sẽ được gọi. Mà ở cuối hàm sayHi mình lại gọi tiếp setTimeout với hàm sayHi - tương tự cách gọi hàm đệ quy.
Cách gọi hàm setTimeout lồng nhau như trên giúp bạn xử lý delay linh hoạt hơn so với cách dùng setInterval. Vì bạn có thể tùy chỉnh thời gian delay cho mỗi lần lặp.
Giả sử bạn cần tạo request lên server sau mỗi 5 giây để cập nhật dữ liệu. Tuy nhiên, server có thể bị quá tải. Dựa vào trạng thái server hiện tại, bạn có thể tăng thời gian delay lên 10, 20, 30, giây... cho phù hợp, ví dụ:
\nlet delay = 5000;\n\nlet timerId = setTimeout(function request() {\n /*... gửi request lên server...*/\n\n if (/* mã lỗi trả về liên quan đến server quá tải */) {\n // tăng delay lên hai lần\n delay *= 2;\n }\n\n // chạy lại setTimeout với giá trị delay mới\n timerId = setTimeout(request, delay);\n\n}, delay); // -> giá trị delay ban đầu là 5000 ms► Cách sử dụng setTimeout lồng nhau cho phép delay chính xác hơn giữa mỗi lần thực hiện hành động so với cách dùng setInterval.
Ví dụ dùng setInterval:
let i = 1;\nsetInterval(function () {\n func(i++);\n}, 100);Ví dụ dùng setTimeout lồng nhau:
let i = 1;\nsetTimeout(function run() {\n func(i++);\n setTimeout(run, 100);\n}, 100);Hàm setInterval thực hiện hành động func(i++) sau mỗi 100ms. Tuy nhiên, hành động func(i++) cũng chiếm thời gian. Do đó, thời gian thực tế giữa hai lần chạy func(i++) là nhỏ hơn 100ms.
Thậm chí là thời gian chạy func(i++) có thể nhiều hơn 100ms thì lần chạy func(i++) tiếp theo sẽ được gọi ngay lập tức sau lần gọi trước. Nói cách khác là không có thời gian delay giữa hai lần chạy func(i++).
Nhưng với cách sử dụng hàm setTimeout lồng nhau thì khác. Với cách này, hàm setTimeout tiếp theo chỉ được gọi khi hàm func(i++) thực hiện xong. Nghĩa là thời gian giữa hai lần chạy func(i++) sẽ đảm bảo khoảng 100ms.
Như mình đã nói trong bài viết về garbage collection trong JavaScript, khi một giá trị là không thể tiếp cận thì nó sẽ được giải phóng khỏi bộ nhớ.
\nĐối với hàm truyền vào setTimeout/setInterval, JavaScript engine sẽ tạo một tham chiếu nội bộ tới hàm thực thi để đảm bảo hàm này không bị giải phóng.
Với hàm setTimeout, hàm truyền vào sẽ được giữ trong bộ nhớ cho tới khi hàm được gọi:
// hàm được giữ trong bộ nhớ cho tới khi thực thi xong\nsetTimeout(function() {...}, 100);Với hàm setInterval, hàm truyền vào được giải phóng khỏi bộ nhớ sau khi gọi clearInterval.
Giả sử hàm truyền vào setInterval tham chiếu đến biến bên ngoài. Vì hàm này luôn tồn tại cho đến khi gọi clearInterval, nên biến được tham chiếu đến cũng sẽ không được giải phóng.
\n\nKhi không thực sự cần thiết, hãy gọi hàm
\nclearIntervalđể giải phóng bộ nhớ.
Có một trường hợp đặc biệt với hàm setTimeout là thời gian delay bằng 0.
Theo lý thuyết, khi delay = 0 thì hành động được thực hiện ngay lập tức. Nhưng thực tế, hành động sẽ được thực hiện ngay khi code luồng chính thực hiện xong, ví dụ:
setTimeout(() => console.log(\"World\"));\n\nconsole.log(\"Hello\");\n// Hello\n// WorldTrong ví dụ trên, câu lệnh console.log(\"Hello\") được thực hiện trước. Và ngay sau khi câu lệnh này thực hiện xong thì câu lệnh console.log(\"World\") được thực hiện.
Chú ý: thời gian delay trên trình duyệt không hoàn toàn bằng 0.
Đối với cách gọi hàm setTimeout lồng nhau, sau 5 lần gọi hàm, thời gian delay sẽ được set bằng 4ms, ví dụ:
let start = Date.now();\nlet times = [];\n\nsetTimeout(function run() {\n // tính toán thời gian delay so với ban đầu\n times.push(Date.now() - start);\n\n // sau 100ms tính từ thời điểm bắt đầu thì sẽ in ra log và dừng lại\n if (Date.now() > start + 100) {\n console.log(times);\n } else {\n setTimeout(run); // tiếp tục setTimeout\n }\n});\n\n// kết quả cuối cùng:\n// (22) [12,14,16,18,25,30,34,38,42,46,51,55,59,63,69,74,79,83,87,92,96,101]Xem kết quả trên, bạn thấy rằng thời gian delay giữa mỗi lần gọi trong 5 lần đầu tiên là khoảng 2ms. Nhưng sau 5 lần thì thời gian delay tăng lên là khoảng 4ms.
\nĐây chính là giới hạn của hàm setTimeout trên trình duyệt. Và giới hạn này cũng gặp phải khi sử dụng hàm setInterval.
Ở môi trường khác như phía server, giới hạn này không gặp phải vì trên Node.js có hàm setImmediate.
\nHàm setTimeout(func, delay, ...args) trong JavaScript cho phép thực hiện hàm func một lần sau một khoảng thời gian delay với các tham số truyền vào là args.
Hàm setInterval(func, delay, ...args) cũng tương tự như hàm setTimeout, nhưng hàm func được thực hiện sau mỗi lần delay.
Để hủy bỏ không gọi hàm func nữa, bạn có thể gọi hàm clearTimeout(timerId) hoặc clearInterval(timerId) với timerId là kết quả trả về sau khi gọi hàm setTimeout hoặc setInterval.
Việc gọi hàm setTimeout lồng nhau giúp bạn xử lý linh hoạt giá trị delay hơn so với cách sử dụng setInterval.
Trường hợp gọi hàm setTimeout(func, 0) với giá trị delay = 0, tương đương với setTimeout(func) sẽ thực hiện hàm func ngay sau khi luồng code chính thực hiện xong.
Đối với trình duyệt, sau 5 lần gọi hàm setTimeout(func) lồng nhau hoặc với setInterval(func) thì thời gian delay được set khoảng 4ms.
Viết hàm printNumbers(start, end) để in ra một số từ start đến end sau mỗi 1 giây theo hai cách:
setInterval.setTimeout.► Cách 1: sử dụng setInterval
function printNumbers(start, end) {\n let timerId = setInterval(function run() {\n if (start > end) {\n clearInterval(timerId);\n return;\n }\n\n console.log(start++);\n }, 1000);\n}\n\nprintNumbers(1, 5);\n// 1, 2, 3, 4, 5► Cách 2: sử dụng setTimeout
function printNumbers(start, end) {\n setTimeout(function run() {\n if (start > end) {\n return;\n }\n\n console.log(start++);\n setTimeout(run, 1000);\n }, 1000);\n}\n\nprintNumbers(1, 5);\n// 1, 2, 3, 4, 5Trong đoạn code sau, hàm setTimeout được gọi với thời gian delay là 100ms.
Sau đó là một vòng lặp for với số lần lặp khoảng 100000000 lần. Mà thời gian thực hiện vòng lặp lớn này thường hơn 100ms.
Hỏi hàm với setTimeout được gọi khi nào?
let i = 0;\n\nsetTimeout(() => console.log(i), 100); // ?\n\n// giả sử thời gian thực hiện vòng lặp lớn hơn 100ms\nconsole.log(\"trước vòng lặp\");\nfor (let j = 0; j < 100000000; j++) {\n i++;\n}\nconsole.log(\"sau vòng lặp\");Kết quả là:
\ntrước vòng lặp\nsau vòng lặp\n100000000Nghĩa là hàm với setTimeout được gọi ngay sau vòng lặp.
Tham khảo:
\n","timeToRead":10,"excerpt":"Đôi khi bạn cần phải thực hiện hành động sau một khoảng thời gian nhất định. Để thực hiện điều này, bạn có thể sử dụng phương thức…","frontmatter":{"directory":"JavaScript","title":"Hàm setTimeout trong JavaScript","date":"2017-06-19T06:20:00Z","tags":["Hàm"],"description":"Để thực hiện hành động sau một khoảng thời gian nhất định, bạn có thể sử dụng phương thức setTimeout. Sau đây là cách khai báo và sử dụng setTimeout trong JavaScript.","keywords":"setTimeout trong javascript","cover":{"childImageSharp":{"gatsbyImageData":{"layout":"fixed","backgroundColor":"#283838","images":{"fallback":{"src":"/static/108ab4f763fc851f2f9f529c413bb9fc/bc51f/ham-settimeout-trong-javascript.png","srcSet":"/static/108ab4f763fc851f2f9f529c413bb9fc/bc51f/ham-settimeout-trong-javascript.png 660w","sizes":"660px"},"sources":[{"srcSet":"/static/108ab4f763fc851f2f9f529c413bb9fc/2b2b5/ham-settimeout-trong-javascript.webp 660w","type":"image/webp","sizes":"660px"}]},"width":660,"height":400}}},"update":"2021-12-29T21:30:00Z"},"fields":{"slug":"/ham-settimeout-trong-javascript/","date":"2017-06-19T06:20:00.000Z"}},"sameSeries":{"totalCount":10,"edges":[{"node":{"fields":{"slug":"/ham-de-quy-trong-javascript/","date":"2017-06-12T20:30:00.000Z"},"excerpt":"Hàm đệ quy trong JavaScript chính là một hàm tự gọi lại chính nó. Ví dụ sau in ra Hello world! n lần sử dụng hàm đệ quy: Kết quả: Đây chỉ là…","timeToRead":9,"frontmatter":{"title":"Hàm đệ quy trong JavaScript","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/c816b29939558d0d7cf4f3124704475b/bc51f/ham-de-quy-trong-javascript.png","srcSet":"/static/c816b29939558d0d7cf4f3124704475b/41200/ham-de-quy-trong-javascript.png 165w,\n/static/c816b29939558d0d7cf4f3124704475b/f979a/ham-de-quy-trong-javascript.png 330w,\n/static/c816b29939558d0d7cf4f3124704475b/bc51f/ham-de-quy-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/c816b29939558d0d7cf4f3124704475b/322ad/ham-de-quy-trong-javascript.webp 165w,\n/static/c816b29939558d0d7cf4f3124704475b/de3b3/ham-de-quy-trong-javascript.webp 330w,\n/static/c816b29939558d0d7cf4f3124704475b/2b2b5/ham-de-quy-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-12T20:30:00Z","update":"2021-12-22T20:30:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/dau-ba-cham-trong-javascript/","date":"2017-06-13T20:30:00.000Z"},"excerpt":"Rất nhiều hàm trong JavaScript hỗ trợ truyền vào số lượng tham số không giới hạn, ví dụ: Math.max(arg1, arg2, ..., argN): trả về giá trị lớn…","timeToRead":10,"frontmatter":{"title":"Dấu ba chấm trong JavaScript","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/af7085ca0b293e63fcccdea23ef5bb47/bc51f/dau-ba-cham-trong-javascript.png","srcSet":"/static/af7085ca0b293e63fcccdea23ef5bb47/41200/dau-ba-cham-trong-javascript.png 165w,\n/static/af7085ca0b293e63fcccdea23ef5bb47/f979a/dau-ba-cham-trong-javascript.png 330w,\n/static/af7085ca0b293e63fcccdea23ef5bb47/bc51f/dau-ba-cham-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/af7085ca0b293e63fcccdea23ef5bb47/322ad/dau-ba-cham-trong-javascript.webp 165w,\n/static/af7085ca0b293e63fcccdea23ef5bb47/de3b3/dau-ba-cham-trong-javascript.webp 330w,\n/static/af7085ca0b293e63fcccdea23ef5bb47/2b2b5/dau-ba-cham-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-13T20:30:00Z","update":"2021-12-23T07:15:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/tim-hieu-javascript-closures/","date":"2017-06-14T06:35:17.000Z"},"excerpt":"Closure trong JS là một trong những khái niệm quan trọng. Việc nắm chắc JavaScript closure là gì và cách sử dụng closure trong JavaScript…","timeToRead":9,"frontmatter":{"title":"Closure là gì? Tìm hiểu closure trong JS","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/9b2f7c91c5fbcdf69e1e1a33952e7418/bc51f/tim-hieu-javascript-closures.png","srcSet":"/static/9b2f7c91c5fbcdf69e1e1a33952e7418/41200/tim-hieu-javascript-closures.png 165w,\n/static/9b2f7c91c5fbcdf69e1e1a33952e7418/f979a/tim-hieu-javascript-closures.png 330w,\n/static/9b2f7c91c5fbcdf69e1e1a33952e7418/bc51f/tim-hieu-javascript-closures.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/9b2f7c91c5fbcdf69e1e1a33952e7418/322ad/tim-hieu-javascript-closures.webp 165w,\n/static/9b2f7c91c5fbcdf69e1e1a33952e7418/de3b3/tim-hieu-javascript-closures.webp 330w,\n/static/9b2f7c91c5fbcdf69e1e1a33952e7418/2b2b5/tim-hieu-javascript-closures.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-14T06:35:17Z","update":"2021-12-25T07:00:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/var-trong-javascript-va-cach-su-dung-iife/","date":"2017-06-15T06:20:00.000Z"},"excerpt":"Var trong JavaScript là một cách cũ để khai báo biến. Và bạn không nên sử dụng var nữa, mà thay vào đó là sử dụng let hoặc const. Tuy nhiên…","timeToRead":6,"frontmatter":{"title":"Var trong JavaScript và cách sử dụng IIFE","shortTitle":"Var trong JavaScript và sử dụng IIFE","tags":["Hàm","Biến"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/191efc837cd96aa4891ae1eb3975bfc4/bc51f/var-trong-javascript-va-cach-su-dung-iife.png","srcSet":"/static/191efc837cd96aa4891ae1eb3975bfc4/41200/var-trong-javascript-va-cach-su-dung-iife.png 165w,\n/static/191efc837cd96aa4891ae1eb3975bfc4/f979a/var-trong-javascript-va-cach-su-dung-iife.png 330w,\n/static/191efc837cd96aa4891ae1eb3975bfc4/bc51f/var-trong-javascript-va-cach-su-dung-iife.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/191efc837cd96aa4891ae1eb3975bfc4/322ad/var-trong-javascript-va-cach-su-dung-iife.webp 165w,\n/static/191efc837cd96aa4891ae1eb3975bfc4/de3b3/var-trong-javascript-va-cach-su-dung-iife.webp 330w,\n/static/191efc837cd96aa4891ae1eb3975bfc4/2b2b5/var-trong-javascript-va-cach-su-dung-iife.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-15T06:20:00Z","update":"2021-12-27T20:00:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/doi-tuong-global-trong-javascript/","date":"2017-06-16T06:20:00.000Z"},"excerpt":"Bài viết này giúp bạn tìm hiểu về đối tượng global trong JavaScript. Qua đây, bạn biết khi nào nên sử dụng đối tượng global. Đối tượng…","timeToRead":4,"frontmatter":{"title":"Đối tượng global trong JavaScript","shortTitle":null,"tags":["Hàm","Object"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/1c2321a3e8f980abcde1bfc0e4ade5f6/bc51f/doi-tuong-global-trong-javascript.png","srcSet":"/static/1c2321a3e8f980abcde1bfc0e4ade5f6/41200/doi-tuong-global-trong-javascript.png 165w,\n/static/1c2321a3e8f980abcde1bfc0e4ade5f6/f979a/doi-tuong-global-trong-javascript.png 330w,\n/static/1c2321a3e8f980abcde1bfc0e4ade5f6/bc51f/doi-tuong-global-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/1c2321a3e8f980abcde1bfc0e4ade5f6/322ad/doi-tuong-global-trong-javascript.webp 165w,\n/static/1c2321a3e8f980abcde1bfc0e4ade5f6/de3b3/doi-tuong-global-trong-javascript.webp 330w,\n/static/1c2321a3e8f980abcde1bfc0e4ade5f6/2b2b5/doi-tuong-global-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-16T06:20:00Z","update":"2021-12-27T21:15:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/function-object-trong-javascript/","date":"2017-06-17T06:20:00.000Z"},"excerpt":"Function trong JavaScript cũng là một loại object. Vì vậy, bạn có thể thêm/xóa thuộc tính vào function hoặc truyền qua hàm khác bởi tham…","timeToRead":9,"frontmatter":{"title":"Function object trong JavaScript","shortTitle":null,"tags":["Hàm","Object"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/400488f0f0a74e1e67ccbbdc6c5c33f0/bc51f/function-object-trong-javascript.png","srcSet":"/static/400488f0f0a74e1e67ccbbdc6c5c33f0/41200/function-object-trong-javascript.png 165w,\n/static/400488f0f0a74e1e67ccbbdc6c5c33f0/f979a/function-object-trong-javascript.png 330w,\n/static/400488f0f0a74e1e67ccbbdc6c5c33f0/bc51f/function-object-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/400488f0f0a74e1e67ccbbdc6c5c33f0/322ad/function-object-trong-javascript.webp 165w,\n/static/400488f0f0a74e1e67ccbbdc6c5c33f0/de3b3/function-object-trong-javascript.webp 330w,\n/static/400488f0f0a74e1e67ccbbdc6c5c33f0/2b2b5/function-object-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-17T06:20:00Z","update":"2021-12-28T20:00:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/cu-phap-new-function-trong-javascript/","date":"2017-06-18T06:20:00.000Z"},"excerpt":"Cú pháp new Function trong JavaScript là một cách khác để định nghĩa hàm. Cách này ít khi được sử dụng, nhưng đôi khi lại rất hữu ích. Cú…","timeToRead":4,"frontmatter":{"title":"Cú pháp new Function trong JavaScript","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/b6d65cda6609acf9edf70a006747b3d8/bc51f/cu-phap-new-function-trong-javascript.png","srcSet":"/static/b6d65cda6609acf9edf70a006747b3d8/41200/cu-phap-new-function-trong-javascript.png 165w,\n/static/b6d65cda6609acf9edf70a006747b3d8/f979a/cu-phap-new-function-trong-javascript.png 330w,\n/static/b6d65cda6609acf9edf70a006747b3d8/bc51f/cu-phap-new-function-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/b6d65cda6609acf9edf70a006747b3d8/322ad/cu-phap-new-function-trong-javascript.webp 165w,\n/static/b6d65cda6609acf9edf70a006747b3d8/de3b3/cu-phap-new-function-trong-javascript.webp 330w,\n/static/b6d65cda6609acf9edf70a006747b3d8/2b2b5/cu-phap-new-function-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-18T06:20:00Z","update":"2021-12-29T20:00:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/ham-settimeout-trong-javascript/","date":"2017-06-19T06:20:00.000Z"},"excerpt":"Đôi khi bạn cần phải thực hiện hành động sau một khoảng thời gian nhất định. Để thực hiện điều này, bạn có thể sử dụng phương thức…","timeToRead":10,"frontmatter":{"title":"Hàm setTimeout trong JavaScript","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/108ab4f763fc851f2f9f529c413bb9fc/bc51f/ham-settimeout-trong-javascript.png","srcSet":"/static/108ab4f763fc851f2f9f529c413bb9fc/41200/ham-settimeout-trong-javascript.png 165w,\n/static/108ab4f763fc851f2f9f529c413bb9fc/f979a/ham-settimeout-trong-javascript.png 330w,\n/static/108ab4f763fc851f2f9f529c413bb9fc/bc51f/ham-settimeout-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/108ab4f763fc851f2f9f529c413bb9fc/322ad/ham-settimeout-trong-javascript.webp 165w,\n/static/108ab4f763fc851f2f9f529c413bb9fc/de3b3/ham-settimeout-trong-javascript.webp 330w,\n/static/108ab4f763fc851f2f9f529c413bb9fc/2b2b5/ham-settimeout-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-19T06:20:00Z","update":"2021-12-29T21:30:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/decorator-forwarding-ham-trong-javascript/","date":"2017-06-20T06:20:00.000Z"},"excerpt":"JavaScript giúp bạn xử lý hàm rất linh động. Bạn có thể truyền hàm vào hàm khác qua tham số hoặc sử dụng hàm như object. Và sau đây, mình sẽ…","timeToRead":12,"frontmatter":{"title":"Kỹ thuật decorator, forwarding của hàm trong JavaScript","shortTitle":"Decorator, forwarding của hàm trong JS","tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/83596cfd0923fbf2c11629e3f3b70183/bc51f/decorator-forwarding-ham-trong-javascript.png","srcSet":"/static/83596cfd0923fbf2c11629e3f3b70183/41200/decorator-forwarding-ham-trong-javascript.png 165w,\n/static/83596cfd0923fbf2c11629e3f3b70183/f979a/decorator-forwarding-ham-trong-javascript.png 330w,\n/static/83596cfd0923fbf2c11629e3f3b70183/bc51f/decorator-forwarding-ham-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/83596cfd0923fbf2c11629e3f3b70183/322ad/decorator-forwarding-ham-trong-javascript.webp 165w,\n/static/83596cfd0923fbf2c11629e3f3b70183/de3b3/decorator-forwarding-ham-trong-javascript.webp 330w,\n/static/83596cfd0923fbf2c11629e3f3b70183/2b2b5/decorator-forwarding-ham-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-20T06:20:00Z","update":"2022-01-02T08:30:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}},{"node":{"fields":{"slug":"/function-binding-trong-javascript/","date":"2017-06-21T06:20:00.000Z"},"excerpt":"Khi sử dụng phương thức của object làm hàm callback, ví dụ sử dụng với hàm setTimeout, thường xảy ra vấn đề là: \"mất giá trị this\". Sau đây…","timeToRead":8,"frontmatter":{"title":"Function binding trong JavaScript","shortTitle":null,"tags":["Hàm"],"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#283838","images":{"fallback":{"src":"/static/d71e212eaf1b1d572add09899f83a21d/bc51f/function-binding-trong-javascript.png","srcSet":"/static/d71e212eaf1b1d572add09899f83a21d/41200/function-binding-trong-javascript.png 165w,\n/static/d71e212eaf1b1d572add09899f83a21d/f979a/function-binding-trong-javascript.png 330w,\n/static/d71e212eaf1b1d572add09899f83a21d/bc51f/function-binding-trong-javascript.png 660w","sizes":"(min-width: 660px) 660px, 100vw"},"sources":[{"srcSet":"/static/d71e212eaf1b1d572add09899f83a21d/322ad/function-binding-trong-javascript.webp 165w,\n/static/d71e212eaf1b1d572add09899f83a21d/de3b3/function-binding-trong-javascript.webp 330w,\n/static/d71e212eaf1b1d572add09899f83a21d/2b2b5/function-binding-trong-javascript.webp 660w","type":"image/webp","sizes":"(min-width: 660px) 660px, 100vw"}]},"width":660,"height":400}}},"date":"2017-06-21T06:20:00Z","update":"2022-01-02T14:30:00Z","series":"JavaScript: Kiến thức nâng cao về hàm"}}}]}},"pageContext":{"slug":"/ham-settimeout-trong-javascript/","series":"JavaScript: Kiến thức nâng cao về hàm","nextTitle":"Cú pháp new Function trong JavaScript","nextSlug":"/cu-phap-new-function-trong-javascript/","prevTitle":"Kỹ thuật decorator, forwarding của hàm trong JavaScript","prevSlug":"/decorator-forwarding-ham-trong-javascript/","latestEdges":[{"node":{"fields":{"slug":"/cach-chon-cms-cho-trang-web/"},"frontmatter":{"directory":"Bài viết được tài trợ","template":"post","title":"Làm thế nào để chọn CMS phù hợp cho trang web của bạn?","shortTitle":"Cách chọn CMS cho trang web","tags":["Wordpress","CMS"],"date":"2022-06-27T20:30:00Z","update":"2022-06-27T20:30:00Z"}}},{"node":{"fields":{"slug":"/async-await-la-gi-async-await-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Async/await là gì? Async/await trong JavaScript","shortTitle":"Async/await là gì? Async/await trong JS","tags":["Async - Await","Promise"],"date":"2017-07-16T06:00:00Z","update":"2022-05-11T21:45:00Z"}}},{"node":{"fields":{"slug":"/microtasks-la-gi-microtasks-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Microtasks là gì? Microtasks trong JavaScript","shortTitle":"Microtasks là gì? Microtasks trong JS","tags":["Callback","Promise"],"date":"2017-07-15T06:00:00Z","update":"2022-05-11T21:00:00Z"}}},{"node":{"fields":{"slug":"/chuyen-callback-thanh-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Chuyển callback thành promise trong JavaScript","shortTitle":"Chuyển callback thành promise trong JS","tags":["Callback","Promise"],"date":"2017-07-14T06:00:00Z","update":"2022-05-11T20:00:00Z"}}},{"node":{"fields":{"slug":"/promise-api-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Các promise API trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-13T06:00:00Z","update":"2022-05-08T21:00:00Z"}}},{"node":{"fields":{"slug":"/xu-ly-loi-voi-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Xử lý lỗi với promise trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-12T06:00:26Z","update":"2022-05-08T20:00:00Z"}}},{"node":{"fields":{"slug":"/chuoi-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Chuỗi promise trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-10T16:24:00Z","update":"2022-05-08T16:24:00Z"}}},{"node":{"fields":{"slug":"/promise-la-gi-promise-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Promise là gì? Promise trong JavaScript","shortTitle":null,"tags":["Promise"],"date":"2017-07-09T13:45:00Z","update":"2022-05-08T13:45:48Z"}}},{"node":{"fields":{"slug":"/callback-la-gi-callback-trong-javascript/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Callback là gì? Callback trong JavaScript","shortTitle":null,"tags":["Callback","Hàm"],"date":"2017-07-08T10:40:00Z","update":"2022-05-08T10:40:48Z"}}},{"node":{"fields":{"slug":"/tuy-bien-mo-rong-doi-tuong-error/"},"frontmatter":{"directory":"JavaScript","template":"post","title":"Tùy biến và mở rộng đối tượng Error trong JavaScript","shortTitle":"Tùy biến và mở rộng đối tượng Error trong JS","tags":["Error"],"date":"2017-07-06T08:00:00Z","update":"2022-05-08T08:24:00Z"}}}],"latestEdgesTitle":"Bài viết mới cập nhật"}}, "staticQueryHashes": []}