STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • Bình luận
    • Sao chép

    Hiện Thực Timer với JavaScript

    Hướng dẫn xây dựng bộ đếm thời gian với JavaScript căn bản.

    Rye Nguyen

    12/08/2015
    20/09/2020
    2 phút đọc
    Hiện Thực Timer với JavaScript

    Ứng dụng đồng hồ đếm thời gian

    Hàm setTimeout được sử dụng để hiện thực. Hàm setTimeout khi được gọi sẽ chờ đợi trong một khoảng thời gian định trước và thực hiện hành động tiếp theo được đặc tả khi gọi hàm. Cú pháp của hàm như sau:

    window.setTimeout(function, milliseconds);

    function sẽ được gọi khi milliseconds trôi qua. Do đặc tính này, setTimeout có thể tạo ra 1 vòng lặp vô hạn giúp gọi lại 1 hàm xác định sau thời gian 1000 milliseconds. Kết hợp với việc thay đổi hiển thị của một thẻ div theo thời gian, tạo ra được một đồng hồ hiển thị thời gian đã trôi qua (time elapse).

    Với vòng lặp vô hạn ở trên, chỉ số sẽ tăng mãi theo thời gian và không dừng lại. Để dừng vòng lặp, sử dụng hàm clearTimeout:

    window.clearTimeout(timeoutVariable);

    Có thể dùng setTimeoutclearTimeout để hiện thực đồng hồ tương tự như sau:

    Source code có thể download ở phía cuối bài viết. Trong file js_tick_counter.js, đoạn code sau:

    start : function(secs, timer_id)
    {
    	this.showTimer(secs, timer_id);
    
    	this.a_secs = secs + a_countStepper;
    	a_timer = setTimeout("projects.start(" + (this.a_secs) + "," + '"' + timer_id + '"' + ")", a_timeout_period);
    },
    
    stop : function(timer_id, project_id)
    {
    	clearTimeout(a_timer);
    },
    

    Hàm start sẽ được lặp liên tục sau chu kì 1s nhờ vào sự sắp xếp trong hàm setTimeout. Ngoài ra, khi hàm stop được gọi thì a_timer sẽ được dừng do đã được gán giá trị sau khi gọi hàm start.

    Đồng bộ trạng thái của timer

    Hướng dẫn trên chỉ hiện thực timer đơn giản, chưa thể đáp ứng được các nhu cầu nâng cao như lưu lại thời gian, giải quyết vấn đề timer vẫn hoạt động khi thoát trình duyệt. Để lưu lại thời gian thì cần có thêm các kiến thức về giao thức POST/GET trong PHP, thao tác và lưu trữ lại trong cơ sở dữ liệu.

    Vấn đề đồng bộ trạng thái lại là 1 vấn đề khác thiên về giải thuật. Trạng thái cuối cùng của timer sẽ được lưu lại trong cơ sở dữ liệu (cách thức lưu trữ tôi không đề cập). Từ đó, trong lần khởi động tiếp theo, hệ thống sẽ xác định được trạng thái trước đó và có hành động tương ứng. Sơ đồ sau sẽ minh hoạ một cách rõ ràng hơn:

    Gi%E1%BA%A3i%20Thu%E1%BA%ADt%20%C4%90%E1%BB%93ng%20B%E1%BB%99%20Tr%E1%BA%A1ng%20Th%C3%A1i%20Cho%20Timer

    Download code demo

    STDIO_TimerDemo.zip

    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Phù hợp cho bạn

    Đề xuất

    Hiện Thực Game Zero Với Unity - Phần 3 - Điểm Số Và Progress Timer

    Hiện Thực Game Zero Với Unity - Phần 3 - Điểm Số Và Progress Timer

    Hướng Dẫn Hiện Thực Game Zero Với Unity. Hướng dẫn cài đặt tính năng ...

    Lập Trình GameCùng làm game

    10/08/2015

    Hiện Thực Game Zero Với Unity - Phần 2 - Hiện Thực Gameplay

    Hiện Thực Game Zero Với Unity - Phần 2 - Hiện Thực Gameplay

    Hướng Dẫn Hiện Thực Game Zero Với Unity. Giới thiệu và hướng dẫn xây ...

    Lập Trình GameCùng làm game

    09/08/2015

    Khám phá thêm

    Hiện Thực Game Zero Với Unity - Phần 1 - Nhận Sự Kiện Button

    Hiện Thực Game Zero Với Unity - Phần 1 - Nhận Sự Kiện Button

    Hướng Dẫn Hiện Thực Game Zero Với Unity. Thiết lập môi trường phát triển ...

    Lập Trình GameCùng làm game

    09/08/2015

    Hiện Thực Game Zero Với Unity - Phần 4 - Scene Và Popup

    Hiện Thực Game Zero Với Unity - Phần 4 - Scene Và Popup

    Hướng Dẫn Hiện Thực Game Zero Với Unity. Thiết kế hệ thống scene và ...

    Lập Trình GameCùng làm game

    10/08/2015

    Hiện Thực Game Zero Với Unity - Phần 5 - Âm Thanh Và Effect

    Hiện Thực Game Zero Với Unity - Phần 5 - Âm Thanh Và Effect

    Hướng Dẫn Hiện Thực Game Zero Với Unity. Hướng dẫn các hiệu ứng âm thanh ...

    Lập Trình GameCùng làm game

    11/08/2015

    Hiện Thực Menu Select Level với Scroll Rect

    Hiện Thực Menu Select Level với Scroll Rect

    Hiện thực level select với thành phần Scroll Rect trong Unity.

    Lập Trình GameUnity

    08/08/2015

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 2: Hiện Thực LoadScene

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 2: Hiện Thực LoadScene

    Hướng dẫn cách để hiện thực một scene trong game, cũng như cách để ...

    Lập Trình GameCùng làm game

    01/03/2015

    Điện Tử Cơ Bản với Arduino – Cài Đặt Lần Đầu và Hiện Thực LED Chớp Tắt

    Điện Tử Cơ Bản với Arduino – Cài Đặt Lần Đầu và Hiện Thực LED Chớp Tắt

    Hướng dẫn thực hiện mạch đèn chớp tắt đơn giản với Arduino. Cung cấp các ...

    Điện Tử Ứng DụngArduino

    12/09/2015

    10 Thứ Bạn Có Thể Làm với JavaScript

    10 Thứ Bạn Có Thể Làm với JavaScript

    Giới thiệu 10 ứng dụng mà JavaScript với sự mạnh mẽ của nó có thể tạo ...

    JavaScriptKiến thức

    06/04/2016

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 9: Hiện thực GameScene - Điểm Số

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 9: Hiện thực GameScene - Điểm Số

    Hướng dẫn cách hiện thực GameScene, cách tính điểm và update điểm số lên ...

    Lập Trình GameCùng làm game

    15/03/2015

    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020