Written by dammecode

[JS Cơ Bản] – Viết một ứng dụng Stop Watch

Bài toán kinh điển (và cổ điển =))) lúc bạn bắt đầu học lập trình hay cụ thể hơn là học về Javascript là bài toán đồng hồ bấm giờ – stopwatch. Ý tưởng rất đơn giản, chỉ cần dùng một biến đếm chạy từ 0, sau đó tăng dần mỗi milisecond chẳng hạn, và từ đó tính ra phút và giây.

Trong JS thì chúng ta sẽ nghĩ ngay đến hàm setInterval(), hàm này sẽ lặp lại việc chạy code trong nó một khoảng thời gian nhất định.

setInterval(() => {
  // do something
  }, 1000);

Tham số thời gian cho hàm này được tính theo đơn vị mili-giây, vì vậy ví dụ trên sẽ chạy code mỗi một giây.

Ngoài setInterval thì còn một hàm nữa trong JS có thể dùng để chạy code trong các khoảng thời gian lặp lại, đó là setTimeout(). Chắc có thể bạn sẽ phản đối vì setTimeout chỉ chạy code một lần sau khi thời gian timeout đã hết, nhưng chúng ta có thể làm cho nó chạy lặp lại nếu dùng đệ quy.

setTimeout(function doSomething() {
    // do something
    watchTimeout = setTimeout(doSomething, 1000);
}, 1000);

Kết quả của đoạn code trên là hàm doSomething() sẽ chạy lại mỗi một giây. Vậy kết quả của hai hàm này có giống y hệt nhau? Câu trả lời là KHÔNG!

Hãy xem ví dụ đoạn code sử dụng cả 2 hàm trên ở dưới đây:

Sở dĩ có sự khác biệt đó là vì hàm setInterval() thì thời gian timeout truyền vào là tính cả thời gian chạy code trong thân hàm, trong khi setTimeout() thì không, tức là nó sẽ đợi khi thân hàm chạy xong đúng một khoảng bằng thời gian timeout mới chạy lần kế tiếp.

Vậy bạn đã biết nên dùng hàm nào cho ứng dụng StopWatch của chúng ta chưa nào?

Thanks for reading!

Leave a comment