WEBVTT

00:00:00.639 --> 00:00:03.875
Ở đây tôi có một trang web với ảnh của Oh Noes,

00:00:03.875 --> 00:00:07.862
đang sợ hãi vì sắp tới tận thế rồi,

00:00:07.862 --> 00:00:10.473
chỉ còn 500 giây.

00:00:10.473 --> 00:00:13.356
Tôi muốn cải tiến trang web này hơn một chút,

00:00:13.356 --> 00:00:16.934
bằng cách biến số này thành một số đếm ngược,

00:00:16.934 --> 00:00:20.781
để người dùng có thể xem xem còn chính xác bao nhiêu giây nữa.

00:00:20.781 --> 00:00:23.934
Khi tạo hình động cho một trang web,

00:00:23.934 --> 00:00:26.708
ta cần tìm element cần động,

00:00:26.708 --> 00:00:29.303
và thay đổi element đó đi,

00:00:29.303 --> 00:00:32.779
như ở đây là thay đổi số giây còn lại.

00:00:32.779 --> 00:00:37.693
Bước đầu tiên là tìm số đếm ngược đấy theo id.

00:00:37.693 --> 00:00:39.490
Đơn giản thôi.

00:00:39.490 --> 00:00:44.417
[gõ...]

00:00:47.536 --> 00:00:51.612
Bước thứ 2, tôi sẽ tạo một hàm để đếm ngược về 0.

00:00:51.612 --> 00:00:54.588
[gõ...]
[typing]

00:00:54.588 --> 00:00:56.856
Giờ ta sẽ

00:00:56.856 --> 00:01:01.217
đặt text.Content, đặt cho bằng

00:01:01.217 --> 00:01:03.755
số trước trừ 1.

00:01:03.755 --> 00:01:06.798
Cái textContent này vốn thuộc kiểu string,

00:01:06.798 --> 00:01:09.947
nên ta sẽ chuyển nó về kiểu số.

00:01:09.947 --> 00:01:12.853
Ta đổi về kiểu số bằng hàm parseFloat().

00:01:12.853 --> 00:01:15.753
Rồi trừ 1 từ số đó đi.

00:01:15.753 --> 00:01:21.541
Cuối cùng ta sẽ cứ cách 1 quãng thời gian thì gọi hàm này để chạy,
Okay, so finally, we want to

00:01:21.541 --> 00:01:25.328
tức là sẽ cứ mỗi giây chạy 1 lần.
which means a certain

00:01:25.328 --> 00:01:30.415
Ta làm thế bằng hàm window.setInterval().

00:01:30.415 --> 00:01:33.691
Hàm này sẽ nhận 2 argument:

00:01:33.691 --> 00:01:38.096
hàm callback, và số milliseconds (0.001 giây) cần đợi

00:01:38.096 --> 00:01:40.885
giữa mỗi lần gọi hàm callback kia.

00:01:40.885 --> 00:01:43.369
Ta truyền hàm callback vào

00:01:43.369 --> 00:01:46.809
cũng như lúc truyền hàm cho event listener vào: nhập tên hàm vào.

00:01:46.809 --> 00:01:49.350
Giờ bạn thấy số đếm ngược đang nhanh quá,

00:01:49.350 --> 00:01:51.827
bởi vì ta chưa nhập vào argument thứ 2,

00:01:51.827 --> 00:01:55.250
tức là số millisecond cần đợi.

00:01:55.250 --> 00:01:58.520
Ta muoosnd dợi 1 giây, nên sẽ nhập vào số 1000.

00:01:58.520 --> 00:02:01.558
bởi vì 1000ms là 1s.

00:02:01.558 --> 00:02:05.218
Thế là xong, giờ nó đang đếm ngược mỗi 1s rồi.

00:02:05.218 --> 00:02:10.245
Chỉ còn có 490 giây thôi!

00:02:10.245 --> 00:02:15.036
Còn một hàm window nữa mà ta cũng thường dùng ngoài setInterval(),

00:02:15.036 --> 00:02:17.227
là hàm setTimeout().

00:02:17.227 --> 00:02:21.782
Tôi sẽ sửa chỗ này đi thế, bạn xem có khác gì không.

00:02:21.782 --> 00:02:23.681
Đợi 1 giây rồi.

00:02:23.681 --> 00:02:28.297
Bạn thấy đây, khi dùng setTimeout

00:02:28.297 --> 00:02:33.881
thì trình duyệt chỉ gọi hàm đó 1 lần, chứ không lặp lại.

00:02:33.881 --> 00:02:38.705
Thế thì không hữu dụng lắm khi tạo hình động,

00:02:38.705 --> 00:02:41.732
nhưng có thể hữu dụng trong trường hợp khác,

00:02:41.732 --> 00:02:45.866
ví dụ như khi ta muốn trình duyệt hiện một cảnh báo ra cho người dùng

00:02:45.866 --> 00:02:48.090
rồi sau 10s thì ẩn đi.

00:02:48.090 --> 00:02:52.894
Tôi sẽ đổi cái này về lại setInterval.

00:02:52.894 --> 00:02:56.507
Khi ta test hình động thế này,

00:02:56.507 --> 00:03:00.410
ta cần kiểm tra kĩ xem từng điểm trong quá trình động sẽ thay đổi thế nào,

00:03:00.410 --> 00:03:02.460
như là khi về 0 thì sẽ thế nào.

00:03:02.460 --> 00:03:05.258
Mà đợi cái này về 0 thì lâu lắm,

00:03:05.258 --> 00:03:07.206
chán ngấy ra mất, nên

00:03:07.206 --> 00:03:10.581
ta sẽ sửa mốc ban đầu thành 5,

00:03:10.581 --> 00:03:12.538
rồi xem xem.

00:03:12.538 --> 00:03:16.732
4, 3, 2, 1, 0...

00:03:16.732 --> 00:03:19.289
-1, -2,...

00:03:19.289 --> 00:03:21.878
Thế này là không được rồi.

00:03:21.878 --> 00:03:26.292
Khi hết giờ, tận thế rồi, thì cần có nổ "Kaboom" và không được đếm nữa.

00:03:26.292 --> 00:03:30.111
Tức là ta sẽ cần dừng hình động này lại

00:03:30.111 --> 00:03:32.734
khi chạm về số 0.

00:03:32.734 --> 00:03:36.319
Ta sẽ thực hiện cái đó với điều kiện 'if' trong hàm này.

00:03:36.319 --> 00:03:42.227
Tôi sẽ gán thời gian hiện tại vào một biến,

00:03:42.227 --> 00:03:44.517
vì ta sẽ phải kiểm tra giá trị đó.

00:03:44.517 --> 00:03:47.513
Tôi lấy cái này, đặt vào đây,

00:03:47.513 --> 00:03:51.273
và sửa cái này thành currentTime.

00:03:51.273 --> 00:03:55.564
Giờ tôi sẽ viết điều kiện if

00:03:55.564 --> 00:04:01.097
để chỉ thay đổi dòng text nếu currentTime lớn hơn 0.

00:04:01.097 --> 00:04:04.938
Khi lớn hơn 0 thì ta mới trừ 1 đi.

00:04:04.938 --> 00:04:10.497
Tôi sẽ đặt cái này vào đây.

00:04:10.497 --> 00:04:15.012
Thế này là được rồi, nhưng vẫn chưa hay lắm,

00:04:15.012 --> 00:04:19.444
vì trình duyệt vẫn gọi hàm này 1 giây 1 lần

00:04:19.444 --> 00:04:21.559
khi ta còn mở trang này (cho dù chữ không thay đổi nữa).

00:04:21.559 --> 00:04:24.842
Ta không nên bắt trình duyệt làm việc thừa như thế.

00:04:24.842 --> 00:04:27.581
Còn nhiều việc khác cần làm.

00:04:27.581 --> 00:04:30.935
Vậy nên ta cần bảo trình duyệt là

00:04:30.935 --> 00:04:35.585
khi về 0 rồi thì không cần gọi hàm này nữa.

00:04:35.585 --> 00:04:40.384
Ta sẽ làm thế với hàm window.clearInterval().

00:04:40.384 --> 00:04:47.354
Ta đặt thêm else vào đây... window.clearInterval().

00:04:47.354 --> 00:04:52.189
Ta cần nhập vào 1 argument để nó biết là cần xoá interval nào,

00:04:52.189 --> 00:04:55.799
bởi vì có những lúc ta lại cần xoá nhiều interval trong trang web.

00:04:55.799 --> 00:04:58.902
Thế biết interval nào cần xoá 

00:04:58.902 --> 00:05:02.983
thì ta chỉ cần gán kết quả của setInterval() vào một biến.

00:05:02.983 --> 00:05:07.816
Giờ là ta đã có một biến thời gian, tôi copy paste nó vào đây,

00:05:07.816 --> 00:05:11.122
như vậy là biết được cần xoá interval nào khi về 0 rồi,

00:05:11.122 --> 00:05:15.571
thế thì trình duyệt sẽ không gọi hàm kia nữa.

00:05:15.571 --> 00:05:19.332
Với tất cả các hình động mà bạn viết, bạn cần để ỹ kĩ

00:05:19.332 --> 00:05:21.695
về điều kiện để dừng chuyển động đó.

00:05:21.695 --> 00:05:26.132
Cũng có những hình động mà bạn muốn chạy vô tận,

00:05:26.132 --> 00:05:29.023
nhưng mà cần để ý kĩ.

00:05:29.023 --> 00:05:33.600
Vì trình duyệt của bạn đang phải làm việc tốn tài nguyên mỗi khi gọi hàm callback về.

00:05:33.600 --> 00:00:00.000
Tiếp teho ta sẽ cải tiến hình động này thêm nữa để cho giống tận thế thật.