Hướng dẫn dùng jstimer JavaScript

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ệuGiá trị mặc địnhGhi 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ứcGhi 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ụ sau1. 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"];
    }
}];

0

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[];
    }];