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

2
00:00:03,875 --> 00:00:07,862
đang sợ hãi vì sắp tới tận thế rồi,

3
00:00:07,862 --> 00:00:10,473
chỉ còn 500 giây.

4
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,

5
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,

6
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.

7
00:00:20,781 --> 00:00:23,934
Khi tạo hình động cho một trang web,

8
00:00:23,934 --> 00:00:26,708
ta cần tìm element cần động,

9
00:00:26,708 --> 00:00:29,303
và thay đổi element đó đi,

10
00:00:29,303 --> 00:00:32,779
như ở đây là thay đổi số giây còn lại.

11
00:00:32,779 --> 00:00:37,693
Bước đầu tiên là tìm số đếm ngược đấy theo id.

12
00:00:37,693 --> 00:00:39,490
Đơn giản thôi.

13
00:00:39,490 --> 00:00:44,417
[gõ...]

14
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.

15
00:00:51,612 --> 00:00:54,588
[gõ...]
[typing]

16
00:00:54,588 --> 00:00:56,856
Giờ ta sẽ

17
00:00:56,856 --> 00:01:01,217
đặt text.Content, đặt cho bằng

18
00:01:01,217 --> 00:01:03,755
số trước trừ 1.

19
00:01:03,755 --> 00:01:06,798
Cái textContent này vốn thuộc kiểu string,

20
00:01:06,798 --> 00:01:09,947
nên ta sẽ chuyển nó về kiểu số.

21
00:01:09,947 --> 00:01:12,853
Ta đổi về kiểu số bằng hàm parseFloat().

22
00:01:12,853 --> 00:01:15,753
Rồi trừ 1 từ số đó đi.

23
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

24
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

25
00:01:25,328 --> 00:01:30,415
Ta làm thế bằng hàm window.setInterval().

26
00:01:30,415 --> 00:01:33,691
Hàm này sẽ nhận 2 argument:

27
00:01:33,691 --> 00:01:38,096
hàm callback, và số milliseconds (0.001 giây) cần đợi

28
00:01:38,096 --> 00:01:40,885
giữa mỗi lần gọi hàm callback kia.

29
00:01:40,885 --> 00:01:43,369
Ta truyền hàm callback vào

30
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.

31
00:01:46,809 --> 00:01:49,350
Giờ bạn thấy số đếm ngược đang nhanh quá,

32
00:01:49,350 --> 00:01:51,827
bởi vì ta chưa nhập vào argument thứ 2,

33
00:01:51,827 --> 00:01:55,250
tức là số millisecond cần đợi.

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

35
00:01:58,520 --> 00:02:01,558
bởi vì 1000ms là 1s.

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

37
00:02:05,218 --> 00:02:10,245
Chỉ còn có 490 giây thôi!

38
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(),

39
00:02:15,036 --> 00:02:17,227
là hàm setTimeout().

40
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.

41
00:02:21,782 --> 00:02:23,681
Đợi 1 giây rồi.

42
00:02:23,681 --> 00:02:28,297
Bạn thấy đây, khi dùng setTimeout

43
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.

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

45
00:02:38,705 --> 00:02:41,732
nhưng có thể hữu dụng trong trường hợp khác,

46
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

47
00:02:45,866 --> 00:02:48,090
rồi sau 10s thì ẩn đi.

48
00:02:48,090 --> 00:02:52,894
Tôi sẽ đổi cái này về lại setInterval.

49
00:02:52,894 --> 00:02:56,507
Khi ta test hình động thế này,

50
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,

51
00:03:00,410 --> 00:03:02,460
như là khi về 0 thì sẽ thế nào.

52
00:03:02,460 --> 00:03:05,258
Mà đợi cái này về 0 thì lâu lắm,

53
00:03:05,258 --> 00:03:07,206
chán ngấy ra mất, nên

54
00:03:07,206 --> 00:03:10,581
ta sẽ sửa mốc ban đầu thành 5,

55
00:03:10,581 --> 00:03:12,538
rồi xem xem.

56
00:03:12,538 --> 00:03:16,732
4, 3, 2, 1, 0...

57
00:03:16,732 --> 00:03:19,289
-1, -2,...

58
00:03:19,289 --> 00:03:21,878
Thế này là không được rồi.

59
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.

60
00:03:26,292 --> 00:03:30,111
Tức là ta sẽ cần dừng hình động này lại

61
00:03:30,111 --> 00:03:32,734
khi chạm về số 0.

62
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.

63
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,

64
00:03:42,227 --> 00:03:44,517
vì ta sẽ phải kiểm tra giá trị đó.

65
00:03:44,517 --> 00:03:47,513
Tôi lấy cái này, đặt vào đây,

66
00:03:47,513 --> 00:03:51,273
và sửa cái này thành currentTime.

67
00:03:51,273 --> 00:03:55,564
Giờ tôi sẽ viết điều kiện if

68
00:03:55,564 --> 00:04:01,097
để chỉ thay đổi dòng text nếu currentTime lớn hơn 0.

69
00:04:01,097 --> 00:04:04,938
Khi lớn hơn 0 thì ta mới trừ 1 đi.

70
00:04:04,938 --> 00:04:10,497
Tôi sẽ đặt cái này vào đây.

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

72
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

73
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).

74
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ế.

75
00:04:24,842 --> 00:04:27,581
Còn nhiều việc khác cần làm.

76
00:04:27,581 --> 00:04:30,935
Vậy nên ta cần bảo trình duyệt là

77
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.

78
00:04:35,585 --> 00:04:40,384
Ta sẽ làm thế với hàm window.clearInterval().

79
00:04:40,384 --> 00:04:47,354
Ta đặt thêm else vào đây... window.clearInterval().

80
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,

81
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.

82
00:04:55,799 --> 00:04:58,902
Thế biết interval nào cần xoá 

83
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.

84
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,

85
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,

86
00:05:11,122 --> 00:05:15,571
thế thì trình duyệt sẽ không gọi hàm kia nữa.

87
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ĩ

88
00:05:19,332 --> 00:05:21,695
về điều kiện để dừng chuyển động đó.

89
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,

90
00:05:26,132 --> 00:05:29,023
nhưng mà cần để ý kĩ.

91
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ề.

92
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.