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 Nếu như bạn nào đã lập trình Winform thì chắc đã biết tới control Đây là thư viện mình tự viết để mô phỏng lại class 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
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"); } }); 02. 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(); }); 0Ở ví dụ này Timer CountDown có sử dụng thêm điều kiện dừng khi biến Hy vọng thư viện nhỏ sẽ hữu ích cho các bạn khi cần |