1. Angular và setTimeout 0: Tình yêu bắt đầu từ đâu?
Để hiểu vì sao Angular và setTimeout 0 lại không thể sống thiếu nhau, trước tiên các bạn cần phải hiểu rõ về nhân vật chính của chúng ta. Đầu tiên, “anh chàng” Angular là một framework phát triển ứng dụng web phía client rất nổi tiếng, do Google tạo ra và duy trì (Đúng kiểu good boy IT lương 3k$). Trong khi đó, “cô nàng” setTimeout 0 là một hàm trong JavaScript cho phép chúng ta thực thi một hàm sau một khoảng thời gian cụ thể, nếu đặt thời gian là 0 thì hàm sẽ được thực thi ngay lập tức sau khi tất cả các hàm hiện tại đã thực thi xong.
Cùng mình xem qua một ví dụ cơ bản với setTimeout 0 nhé!
1 2 3 4 5 6 7 8 | console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Trước setTimeout"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Trong setTimeout"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Sau setTimeout"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Chắc chắn các bạn sẽ nhận thấy rằng kết quả sẽ là:
1 2 3 4 | Trước setTimeout Sau setTimeout Trong setTimeout |
Thế mới thú vị chứ! Dù cho thời gian chờ của setTimeout là 0, nhưng câu lệnh trong hàm setTimeout vẫn chờ cho tất cả các câu lệnh trước đó hoàn thành mới được thực thi.
“Vậy liên quan gì tới Angular?” các bạn có thể thắc mắc. Đây chính là điểm thú vị! Angular sử dụng một cơ chế gọi là Zone.js để theo dõi các thay đổi trong ứng dụng và cập nhật giao diện phù hợp. Mà Zone.js thì lại theo dõi các hoạt động bất đồng bộ thông qua các hàm như setTimeout, Promise, XMLHttpRequest… Chính vì vậy, setTimeout 0 chính là một “công cụ” cực kỳ hữu ích để chúng ta “ép” Angular cập nhật giao diện ngay lập tức.
Nào, hãy cùng mình đi sâu vào ngữ cảnh cụ thể của việc sử dụng setTimeout 0 trong Angular nhé!
2. Angular và setTimeout 0: Một mối tình không thể tách rời
Giả sử bạn đang làm việc với một ứng dụng Angular và bạn cần thực hiện một hoạt động nào đó sau khi Angular đã cập nhật giao diện, chẳng hạn như lấy kích thước của một phần tử DOM sau khi nó đã được render. Bạn có thể nghĩ rằng, chúng ta chỉ cần đặt mã đó trong hàm ngAfterViewInit(), nhưng không, cuộc sống không hề đơn giản như vậy, các bạn à!
Ví dụ, xem đoạn mã sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> <span class="token punctuation">{</span>AfterViewInit<span class="token punctuation">,</span> Component<span class="token punctuation">,</span> ElementRef<span class="token punctuation">,</span> ViewChild<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token operator">:</span> <span class="token string">'my-app'</span><span class="token punctuation">,</span> template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div #myDiv>Chào các bạn!</div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token keyword">implements</span> <span class="token class-name">AfterViewInit</span> <span class="token punctuation">{</span> @<span class="token function">ViewChild</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span> myDiv<span class="token operator">:</span> ElementRef<span class="token punctuation">;</span> <span class="token function">ngAfterViewInit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Chiều cao của div: '</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myDiv<span class="token punctuation">.</span>nativeElement<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Khi bạn chạy mã này, bạn sẽ thấy rằng chiều cao của div được log ra trước khi Angular thực sự render nó, do đó kết quả không chính xác. Bạn có thể thử thay đổi kích thước của div và xem kết quả, chắc chắn nó sẽ làm bạn ngạc nhiên!
“Vậy làm sao để giải quyết vấn đề này?” – Các bạn có thể hỏi. Đúng, đây chính là lúc “cô nàng” setTimeout 0 sẽ xuất hiện và giải cứu chúng ta!
Cùng xem đoạn mã sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">import</span> <span class="token punctuation">{</span>AfterViewInit<span class="token punctuation">,</span> Component<span class="token punctuation">,</span> ElementRef<span class="token punctuation">,</span> ViewChild<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token operator">:</span> <span class="token string">'my-app'</span><span class="token punctuation">,</span> template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div #myDiv>Chào các bạn!</div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token keyword">implements</span> <span class="token class-name">AfterViewInit</span> <span class="token punctuation">{</span> @<span class="token function">ViewChild</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span> myDiv<span class="token operator">:</span> ElementRef<span class="token punctuation">;</span> <span class="token function">ngAfterViewInit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Chiều cao của div: '</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myDiv<span class="token punctuation">.</span>nativeElement<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bằng cách sử dụng setTimeout 0, chúng ta “ép” Angular phải chờ cho tất cả các công việc hiện tại hoàn thành (bao gồm cả việc render div của chúng ta) trước khi thực hiện công việc tiếp theo. Và bây giờ, khi bạn chạy mã này, bạn sẽ thấy rằng chiều cao của div được log ra đúng như bạn mong đợi, cho dù bạn thay đổi kích thước của nó như thế nào.
Đó là lý do mà mình nói Angular và setTimeout 0 không thể sống thiếu nhau được. Mối tình này không chỉ giúp chúng ta giải quyết những vấn đề khó khăn trong quá trình phát triển ứng dụng, mà còn mang đến cho chúng ta những hiểu biết sâu sắc hơn về cách Angular hoạt động. Bạn thấy đấy, dù là lập trình, nhưng vẫn đầy rẫy những câu chuyện tình yêu thú vị như thế này đúng không nào?
3. Lưu ý khi sử dụng setTimeout 0 trong Angular
Tuy “mối tình” này có vẻ rất lãng mạn, nhưng cũng không phải lúc nào cũng mặn nồng đâu nhé. Cần lưu ý rằng, sử dụng setTimeout 0 có thể dẫn đến một số vấn đề nếu chúng ta không cẩn thận.
Performance: SetTimeout sẽ đặt công việc của bạn vào hàng đợi và chờ đến khi tất cả công việc khác hoàn thành. Nếu bạn sử dụng quá nhiều setTimeout 0, ứng dụng của bạn có thể trở nên chậm chạp hơn.
Memory Leaks: Nếu bạn không cẩn thận, việc sử dụng setTimeout có thể dẫn đến rò rỉ bộ nhớ. Điều này xảy ra khi bạn đặt timeout nhưng quên không hủy nó trước khi component được hủy.
Unintended Side Effects: Vì setTimeout 0 đặt công việc của bạn vào cuối hàng đợi, nên nếu có bất kỳ thay đổi nào đối với dữ liệu mà bạn dựa vào trong thời gian chờ đợi, hàm callback có thể hoạt động không đúng như mong đợi.
Vậy làm thế nào để tránh những vấn đề này? Đầu tiên, hãy hạn chế việc sử dụng setTimeout 0 chỉ khi thực sự cần thiết. Thứ hai, luôn nhớ hủy timeout khi không cần thiết nữa, đặc biệt là khi component được hủy.
Dưới đây là ví dụ về cách hủy một timeout:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">import</span> <span class="token punctuation">{</span>AfterViewInit<span class="token punctuation">,</span> Component<span class="token punctuation">,</span> ElementRef<span class="token punctuation">,</span> OnDestroy<span class="token punctuation">,</span> ViewChild<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token operator">:</span> <span class="token string">'my-app'</span><span class="token punctuation">,</span> template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div #myDiv>Chào các bạn!</div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token keyword">implements</span> <span class="token class-name">AfterViewInit</span><span class="token punctuation">,</span> OnDestroy <span class="token punctuation">{</span> @<span class="token function">ViewChild</span><span class="token punctuation">(</span><span class="token string">'myDiv'</span><span class="token punctuation">)</span> myDiv<span class="token operator">:</span> ElementRef<span class="token punctuation">;</span> <span class="token keyword">private</span> timeoutId<span class="token punctuation">;</span> <span class="token function">ngAfterViewInit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>timeoutId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Chiều cao của div: '</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myDiv<span class="token punctuation">.</span>nativeElement<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">ngOnDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>timeoutId <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong đoạn mã này, chúng ta lưu trữ ID của timeout và sau đó sử dụng nó để hủy timeout khi component được hủy. Nhờ vậy, chúng ta có thể ngăn chặn rò rỉ bộ nhớ và đảm bảo ứng dụng của chúng ta luôn hoạt động một cách hiệu quả nhất.
4. Kết luận
Angular và setTimeout 0, một mối tình lãng mạn nhưng cũng không kém phần thử thách. Mặc dù họ có thể giúp chúng ta giải quyết nhiều vấn đề phức tạp, nhưng cũng cần phải cẩn thận để tránh các vấn đề có thể xảy ra. Hy vọng sau bài viết này, các bạn đã hiểu hơn về cách sử dụng setTimeout 0 trong Angular và cách để làm cho “mối tình” này trở nên êm đềm hơn. (Cảm ơn bạn đã đọc tới đây và cố nuốt những dòng văn của 1 thằng chưa bao giờ được quá 5 điểm môn văn.)