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

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

0:00:07.862,0:00:10.473
chỉ còn 500 giây.

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

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

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

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

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

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

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

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

0:00:37.693,0:00:39.490
Đơn giản thôi.

0:00:39.490,0:00:44.417
[gõ...]

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

0:00:51.612,0:00:54.588
[gõ...][br][typing]

0:00:54.588,0:00:56.856
Giờ ta sẽ

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

0:01:01.217,0:01:03.755
số trước trừ 1.

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

0:01:06.798,0:01:09.947
nên ta sẽ chuyển nó về kiểu số.

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

0:01:12.853,0:01:15.753
Rồi trừ 1 từ số đó đi.

0:01:15.753,0: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,[br]Okay, so finally, we want to

0:01:21.541,0:01:25.328
tức là sẽ cứ mỗi giây chạy 1 lần.[br]which means a certain

0:01:25.328,0:01:30.415
Ta làm thế bằng hàm window.setInterval().

0:01:30.415,0:01:33.691
Hàm này sẽ nhận 2 argument:

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

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

0:01:40.885,0:01:43.369
Ta truyền hàm callback vào

0:01:43.369,0: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.

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

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

0:01:51.827,0:01:55.250
tức là số millisecond cần đợi.

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

0:01:58.520,0:02:01.558
bởi vì 1000ms là 1s.

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

0:02:05.218,0:02:10.245
Chỉ còn có 490 giây thôi!

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

0:02:15.036,0:02:17.227
là hàm setTimeout().

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

0:02:21.782,0:02:23.681
Đợi 1 giây rồi.

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

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

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

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

0:02:41.732,0: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

0:02:45.866,0:02:48.090
rồi sau 10s thì ẩn đi.

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

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

0:02:56.507,0: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,

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

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

0:03:05.258,0:03:07.206
chán ngấy ra mất, nên

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

0:03:10.581,0:03:12.538
rồi xem xem.

0:03:12.538,0:03:16.732
4, 3, 2, 1, 0...

0:03:16.732,0:03:19.289
-1, -2,...

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

0:03:21.878,0: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.

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

0:03:30.111,0:03:32.734
khi chạm về số 0.

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

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

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

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

0:03:47.513,0:03:51.273
và sửa cái này thành currentTime.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0:04:55.799,0:04:58.902
Thế biết interval nào cần xoá

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

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

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

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

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

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

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

0:05:26.132,0:05:29.023
nhưng mà cần để ý kĩ.

0:05:29.023,0: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ề.

0:05:33.600,0: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.