Trong bài viết này mình sẽ hướng dẫn các bạn tạo một thư viện Timer bằng Javascript

Nếu như bạn nào đã lập trình Winform thì chắc đã biết tới control Timer. Chỉ việc kéo thả, định thời gian chu kỳ (Interval) hoạt động và viết sự kiện Tick để thực hiện một Task nào đó. Tuy nhiên trong Javascript thì lại không có class Timer cho chúng ta sử dụng. 

Đây là thư viện mình tự viết để mô phỏng lại class Timer trong Winform C#.

Core.Timer = function (option)
{
	if (option == null) option = {};
	if (option.interval == null) option.interval = 500;

	var to = null;
	this.isRunning = false;

	this.setOption = function (withOption) { if (withOption != null) withOption(option); };

	this.start = function ()
	{
		var $this = this;

		if (this.isRunning) return;
		this.isRunning = true;

		var interval = typeof (option.interval) == "function" ? option.interval : function () { return option.interval; };
		this.onStart();
		var func = function ()
		{
			stopHelper();
			to = setTimeout(function ()
			{
				var result = option.stopWhen != null && option.stopWhen();
				if (result)
				{
					clearTimeout(to);
					to = null;
					$this.onStop();
					return;
				};

				if (option.onTick != null) option.onTick();
				if ($this.isRunning === true) func();
				else $this.onStop();
			}, interval());
		}
		func();
	}
	this.onStart = function () { }
	this.onStop = function () { }
	this.stop = function ()
	{
		if (this.isRunning == false) return;
		this.isRunning = false;
		stopHelper();
	};
	var stopHelper = function () { if (to != null) { clearTimeout(to); to = null; }; };
}
Options
Tham số Kiểu dữ liệu Giá trị mặc định Ghi chú
interval function hoặc int 500 (ms) Chu kỳ của Timer
onTick function null Task cần thực hiện sau mỗi chu kỳ
stopWhen function true return true để dừng Timer
Phương thức
Tên phương thức Ghi chú
this.setOption Dùng để thiết lập option
this.onStart Sự kiện khi bắt đầu chạy Timer
this.onStop Sự kiện khi Timer dừng
this.start Bắt đầu chạy Timer
this.stop Kết thúc chạy Timer
Giờ chúng ta sẽ thử một số ví dụ sau
1. Thử một Timer mà CountUp liên tục nhé
var UpCounter = function ()
{
    $.extend(this, new Core.Timer());

    this.elementShow;
    var count = 0;

    this.onStart = function ()
    {
        var $this = this;
        this.setOption(function (options)
        {                
            options.interval = 1000;
            options.tick = function ()
            {
                count++;
                $this.show();
            };
        });

        count = 0;
        this.show();
    }
    this.show = function ()
    {
        if (this.elementShow != null)
            this.elementShow.html(count);
    };
}

var content = $("article");

var counter = new UpCounter();
counter.elementShow = content.find("span[data-up-counter]");

var btn = content.find("[btn-up-counter]");
btn.click(function ()
{
    if (btn.state == null) btn.state = 0;
    if (btn.state == 0)
    {
        btn.state = 1;
        counter.start();
        btn.html("Dừng");
    }
    else
    {
        btn.state = 0;
        counter.stop();
        btn.html("Bắt đầu");
    }
});
2. Thử một Timer mà CountDown liên tục nhé
    var DownCounter = function ()
    {
        $.extend(this, new Core.Timer());

        this.elementShow;
        var count = 100;

        this.onStart = function ()
        {
            var $this = this;
            this.setOption(function (options)
            {
                options.interval = 1000;
                options.onTick = function ()
                {
                    count--;
                    $this.show();
                };
                options.stopWhen = function () { return count == 0; };
            });

            count = 100;
            this.show();
        }
        this.show = function ()
        {
            if (this.elementShow != null)
                this.elementShow.html(count);
        };
    }

    var content = $("article");

    var counter = new DownCounter();
    counter.elementShow = content.find("[data-counter-text=down]");
    var btn = content.find(".btn[data-counter=down]");
    counter.onStop = function ()
    {
        btn.state = 0;
        counter.stop();
        btn.html("Bắt đầu");
    }

    btn.click(function ()
    {
        if (btn.state == null) btn.state = 0;
        if (btn.state == 0)
        {
            btn.state = 1;
            counter.start();
            btn.html("Dừng");
        }
        else counter.onStop();
    });

Ở ví dụ này Timer CountDown có sử dụng thêm điều kiện dừng khi biến count = 0

Hy vọng thư viện nhỏ sẽ hữu ích cho các bạn khi cần