JavaScript Timer implementation

Recently, I started to use flex. Compared with javascript, I feel that the Timer class of as3 is very powerful. Javascript only has the setTimeout and setInternval of the nude. To implement a slightly more complex function, programmers with little background will write code in disorder.

 

OK, no nonsense. Implement a javascript Timer.

Compared with the Timer class of as3, the function is slightly changed.

 

Timer2.src. js

 

/** <Br/> * Timer Model <br/> * @ author rainsilence <br/> * @ version 2.0 <br/> */<br/> (function () {</p> <p>/** <br/> * TimerEvent constructor <br/> * @ param type event type <br/> * @ param bubbles: whether the ticket is issued <br/> * @ param cancelable <br/> */<br/> TimerEvent = function (type, bubbles, cancelable) {<br/> this. type = type; <br/> this. bubbles = bubbles; <br/> this. cancelable = cancelable; <br/> }; </P> <p>/** <br/> * Event time event declaration <br/> * @ event TIMER <br/> * @ Event TIMER_COMPLETE <br/> */<br/> extend (TimerEvent, {<br/> TIMER: "timer", <br/> TIMER_COMPLETE: "timerComplete" <br/> }); </p> <p>/** <br/> * Event method <br/> * @ method toString <br/> */<br/> extend (TimerEvent. prototype, {<br/> toString: function () {<br/> return "[TimerEvent type =" + this. type + <br/> "bubbles =" + this. Bubbles + <br/> "cancelable =" + this. cancelable + "]"; <br/>}< br/>}); </p> <p>/** <br/> * extended class, object attributes or methods <br/> * @ param target object <br/> * @ param methods changing to param may be more appropriate, indicating that the object is hosted, method object for target extension <br/> */<br/> function extend (target, methods) {</p> <p> if (! Target) {<br/> target ={}; <br/>}</p> <p> for (var prop in methods) {<br/> target [prop] = methods [prop]; <br/>}</p> <p> return target; <br/>}</p> <p>/** <br/> * Timer constructor <br/> * @ param delay method handle <br/> * @ param repeatCount times, if this parameter is not set, the repeat is infinite. <br/> */<br/> Timer = function (delay, repeatCount) {<br/> var listenerMap = {}; <br/> listenerMap [TimerEvent. TIMER] = []; <br/> listenerMap [TimerEv Ent. TIMER_COMPLETE] = []; </p> <p> extend (this, {<br/> currentCount: 0, <br/> running: false, <br/> delay: delay, <br/> repeatCount: repeatCount, <br/> // true: Interval, false: Timeout <br/> repeatType: repeatCount = null | repeatCount <1? True: false, <br/> handler: listenerMap, <br/> timerId: 0, <br/> isCompleted: false <br/>}); <br/> }; </p> <p> // event object initialization (not implemented in this Part) <br/> var timerEvent = new TimerEvent (TimerEvent. TIMER, false, false); <br/> var timerCompleteEvent = new TimerEvent (TimerEvent. TIMER_COMPLETE, false, false ); </p> <p>/** <br/> * Timer method <br/> * @ method addEventListener adds a method handle (the first two parameters must be, the next parameter is optional.) <br/> * @ method re MoveEventListener remove a method handle <br/> * @ method start timer <br/> * @ method stop timer <br/> * @ method reset timer <br/> * /<br/> extend (Timer. prototype, {</p> <p> addEventListener: function (type, listener, useCapture) {<br/> if (type = TimerEvent. TIMER | type = TimerEvent. TIMER_COMPLETE) {</p> <p> if (! Listener) {<br/> alert ("Listener is null"); <br/>}</p> <p> if (useCapture = true) {<br/> this. handler [type]. splice (0, 0, [listener]); <br/>} else {<br/> this. handler [type]. push (listener); <br/>}< br/>}, </p> <p> removeEventListener: function (type, listener) {<br/> if (type = TimerEvent. TIMER | type = TimerEvent. TIMER_COMPLETE) {</p> <p> if (! Listener) {<br/> this. handler [type] = []; <br/>} else {</p> <p> var listeners = this. handler [type]; </p> <p> for (var index = 0; index <listeners. length; index ++) {<br/> if (listeners [index] = listener) {<br/> listeners. splice (index, 0); <br/> break; <br/>}< br/> }, </p> <p> start: function () {</p> <p> var timerThis = this; </p> <p> if (this. running = true | this. isCompleted) {<br/> retu Rn; <br/>}</p> <p> if (this. handler [TimerEvent. TIMER]. length = 0 & <br/> this. handler [TimerEvent. TIMER_COMPLETE]. length = 0) {<br/> alert ("No Function"); <br/> return; <br/>}</p> <p> if (this. repeatType) {<br/> this. timerId = setInterval (function () {<br/> dispachListener (timerThis. handler [TimerEvent. TIMER], timerEvent); <br/> timerThis. currentCount ++; <br/>}, this. delay); <br/>}else {<br/> this. timer Id = setTimeout (function () {delayExecute (timerThis. handler [TimerEvent. TIMER]) ;}, this. delay); <br/>}</p> <p> this. running = true; </p> <p> function delayExecute (listeners) {<br/> dispachListener (listeners, timerEvent); <br/> timerThis. currentCount ++; </p> <p> if (timerThis. currentCount <timerThis. repeatCount) {<br/> if (timerThis. running) {<br/> timerThis. timerId = setTimeout (function () {delayExecute (list Eners);}, timerThis. delay); <br/>}< br/>}else {<br/> timerThis. running = false; <br/>}< br/> if (timerThis. running = false) {<br/> if (! TimerThis. isCompleted) {<br/> dispachListener (timerThis. handler [TimerEvent. TIMER_COMPLETE], timerCompleteEvent); <br/>}< br/> timerThis. isCompleted = true; <br/>}</p> <p> function dispachListener (listeners, event) {<br/> for (var prop in listeners) {<br/> listeners [prop] (event); <br/>}< br/>}, <br/> stop: function () {<br/> this. running = false; </p> <p> if (this. timerId = null) {<br/> retu Rn; <br/>}</p> <p> if (this. repeatType) {<br/> clearInterval (this. timerId); <br/>}else {<br/> clearTimeout (this. timerId); <br/>}< br/> if (! This. isCompleted) {</p> <p> var listeners = this. handler [TimerEvent. TIMER_COMPLETE]; </p> <p> for (var prop in listeners) {<br/> listeners [prop] (timerCompleteEvent ); <br/>}< br/> this. isCompleted = true; <br/>}, </p> <p> reset: function () {<br/> this. currentCount = 0; <br/> this. isCompleted = false; <br/>}< br/>}); <br/> })(); 

 

Next, let's test it. Have you ever seen the Scroll display on Sina? It's written in setTimeout. It's really called a ox cross ...... Rebuild with Timer, easy to understand

 

TimerTest.html

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <br/> <ptml> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = windows-31j "> <br/> <title> Insert title here </title> <br/> <mce: style type =" text/css "> <! -- <Br/>. rowLine {<br/> width: 400px; <br/> height: 80px; <br/> border-bottom-style: solid; <br/> border-width: 1px; <br/>}</p> <p>. barList {<br/> border-style: solid; <br/> border-width: 1px; <br/> width: 400px; <br/> height: 80px; <br/> overflow: hidden; <br/>}< br/> --> </mce: style> <style type = "text/css" mce_bogus = "1">. rowLine {<br/> width: 400px; <br/> height: 80px; <br/> border-bottom-style: solid; <br/> bo Rder-width: 1px; <br/>}</p> <p>. barList {<br/> border-style: solid; <br/> border-width: 1px; <br/> width: 400px; <br/> height: 80px; <br/> overflow: hidden; <br/>}</style> <br/> <mce: script type = "text/javascript" src = "js/timer2.src. js "mce_src =" js/timer2.src. js "> </mce: script> <br/> <mce: script type =" text/javascript "> <! -- <Br/> var timer = new Timer (50); <br/> var globalTimer = new Timer (10000); <br/> var bList; <br/> function init () {<br/> bList = document. getElementById ("barList"); </p> <p> timer. addEventListener (TimerEvent. TIMER, calTime); <br/> timer. start (); <br/> globalTimer. addEventListener (TimerEvent. TIMER, controlTime); <br/> globalTimer. start (); <br/>}< br/> function controlTime () {<br/> if (! Timer. running) {<br/> timer. reset (); <br/> timer. start (); <br/>}</p> <p> function calTime () {</p> <p> bList. scrollTop + = 1; <br/> if (bList. scrollTop> 80) {<br/> timer. stop (); <br/> var barNode = bList. firstChild; <br/> if (barNode. nodeType = 3) {<br/> bList. appendChild (barNode); <br/> bList. appendChild (bList. getElementsByTagName ("div") [0]); <br/>}else {<br/> bList. appendChild (barNode); <br/>}</p> <p> bList. scrollTop = 0; <br/>}</p> <p> window. onload = init; <br/> // --> </mce: script> <br/> </pead> <br/> <body> <br/> <div class = "barList" id = "barList"> <br/> <div class = "rowLine" style = "background-color: red "mce_style =" background-color: red "> 1 </div> <br/> <div class =" rowLine "style =" background-color: pink "mce_style =" background-color: pink "> 2 </div> <br/> <div class =" rowLine "style =" background-color: blue "mce_style =" background-color: blue "> 3 </div> <br/> <div class =" rowLine "style =" background-color: gray "mce_style =" background-color: gray "> 4 </div> <br/> </body> <br/> </ptml> 

 

The useCapture parameter of addEventListener is intended for triggering in the capture phase. If it is changed to true, It is triggered before other handles. If it is false, it is triggered after other handles.

 

Postscript:

 

It seems that the usage of comments is quite popular... For example, struts + spring + hibernate. While ignoring the essence of programming. I hope you can read the source code and discuss the source code more. Otherwise, people will use this framework today and change it tomorrow. You have to start from scratch again.