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

Phương thức

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

Nếu bạn thấy nội dung chia sẻ này có ích với bạn hãy Donate để tạo động lực cho tôi viết các bài viết tiếp theo nhé. Cảm ơn nhiều !!!!