OK, no nonsense. Implement a javascript timer.
Compared with the Timer class of as3, the function is slightly changed.
Timer2.src. js
CopyCode The Code is as follows :/**
* Timer Model
*
* @ Author rainsilence
* @ Version 2.0
*/
(Function (){
/**
* Timerevent constructor Constructor
*
* @ Param type event type
* @ Param bubbles: whether the ticket is issued
* @ Param cancelable: can be canceled?
*/
Timerevent = function (type, Bubbles, cancelable ){
This. type = type;
This. Bubbles = bubbles;
This. cancelable = cancelable;
};
/**
* Event time event Declaration
*
* @ Event timer
* @ Event timer_complete
*/
Extend (timerevent ,{
Timer: "timer ",
Timer_complete: "timercomplete"
});
/**
* Event Method
*
* @ Method tostring
*/
Extend (timerevent. prototype ,{
Tostring: function (){
Return "[timerevent type =" + this. Type +
"Bubbles =" + this. Bubbles +
"Cancelable =" + this. cancelable + "]";
}
});
/**
* Extend extension class, object attributes or methods
*
* @ Param Target target object
* @ Param methods it may be more appropriate to change this parameter to Param, indicating that the object carrying the object and the object of the method are used for target extension.
*/
Function extend (target, methods ){
If (! Target ){
Target = {};
}
For (VAR prop in methods ){
Target [prop] = methods [prop];
}
Return target;
}
/**
* Timer Constructor
*
* @ Param delay how long is the latency of the execution method handle?
* @ Param repeatcount: the number of repeated times. If this parameter is not set, the number of repeated times is unlimited.
*/
Timer = function (delay, repeatcount ){
VaR listenermap = {};
Listenermap [timerevent. Timer] = [];
Listenermap [timerevent. timer_complete] = [];
Extend (this ,{
Currentcount: 0,
Running: false,
Delay: delay,
Repeatcount: repeatcount,
// True: interval, false: timeout
Repeattype: repeatcount = NULL | repeatcount <1? True: false,
Handler: listenermap,
Timerid: 0,
Iscompleted: false
});
};
// Event object initialization (this part is not implemented)
VaR timerevent = new timerevent (timerevent. Timer, false, false );
VaR timercompleteevent = new timerevent (timerevent. timer_complete, false, false );
/**
* Timer method
*
* @ Method addeventlistener Add a method handle (the first two parameters are required, and the last parameter is optional)
* @ Method removeeventlistener remove a method handle
* @ Method start Timer
* @ Method stop end Timer
* @ Method reset timer
*/
Extend (timer. prototype ,{
Addeventlistener: function (type, listener, usecapture ){
If (type = timerevent. Timer | type = timerevent. timer_complete ){
If (! Listener ){
Alert ("listener is null ");
}
If (usecapture = true ){
This. Handler [type]. splice (0, 0, [listener]);
} Else {
This. Handler [type]. Push (listener );
}
}
},
Removeeventlistener: function (type, listener ){
If (type = timerevent. Timer | type = timerevent. timer_complete ){
If (! Listener ){
This. Handler [type] = [];
} Else {
VaR listeners = This. Handler [type];
For (VAR Index = 0; index <listeners. length; index ++ ){
If (listeners [Index] = listener ){
Listeners. splice (index, 1 );
Break;
}
}
}
}
},
Start: function (){
VaR timerthis = this;
If (this. Running = true | this. iscompleted ){
Return;
}
If (this. Handler [timerevent. Timer]. Length = 0 &&
This. Handler [timerevent. timer_complete]. Length = 0 ){
Alert ("no function ");
Return;
}
If (this. repeattype ){
This. timerid = setinterval (function (){
Dispachlistener (timerthis. Handler [timerevent. Timer], timerevent );
Timerthis. currentcount ++;
}, This. Delay );
} Else {
This. timerid = setTimeout (function () {delayexecute (timerthis. Handler [timerevent. Timer]) ;}, this. Delay );
}
This. Running = true;
Function delayexecute (listeners ){
Dispachlistener (listeners, timerevent );
Timerthis. currentcount ++;
If (timerthis. currentcount <timerthis. repeatcount ){
If (timerthis. Running ){
Timerthis. timerid = setTimeout (function () {delayexecute (listeners) ;}, timerthis. Delay );
}
} Else {
Timerthis. Running = false;
}
If (timerthis. Running = false ){
If (! Timerthis. iscompleted ){
Dispachlistener (timerthis. Handler [timerevent. timer_complete], timercompleteevent );
}
Timerthis. iscompleted = true;
}
}
Function dispachlistener (listeners, event ){
For (VAR prop in listeners ){
Listeners [prop] (event );
}
}
},
Stop: function (){
This. Running = false;
If (this. timerid = NULL ){
Return;
}
If (this. repeattype ){
Clearinterval (this. timerid );
} Else {
Cleartimeout (this. timerid );
}
If (! This. iscompleted ){
VaR listeners = This. Handler [timerevent. timer_complete];
For (VAR prop in listeners ){
Listeners [prop] (timercompleteevent );
}
}
This. iscompleted = true;
},
Reset: function (){
This. currentcount = 0;
This. iscompleted = false;
}
});
})();
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 Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = windows-31j">
<Title> insert title here </title>
<Style type = "text/CSS">
. Rowline {
Width: 400px;
Height: 80px;
Border-bottom-style: solid;
Border-width: 1px;
}
. Barlist {
Border-style: solid;
Border-width: 1px;
Width: 400px;
Height: 80px;
Overflow: hidden;
}
</Style>
<SCRIPT type = "text/JavaScript" src = "JS/timer2.src. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
<! --
VaR timer = new timer (50 );
VaR globaltimer = new timer (10000 );
VaR blist;
Function Init (){
Blist = Document. getelementbyid ("barlist ");
Timer. addeventlistener (timerevent. Timer, caltime );
Timer. Start ();
Globaltimer. addeventlistener (timerevent. Timer, controltime );
Globaltimer. Start ();
}
Function controltime (){
If (! Timer. Running ){
Timer. Reset ();
Timer. Start ();
}
}
Function caltime (){
Blist. scrolltop + = 1;
If (blist. scrolltop> 80 ){
Timer. Stop ();
VaR barnode = blist. firstchild;
If (barnode. nodetype = 3 ){
Blist. appendchild (barnode );
Blist. appendchild (blist. getelementsbytagname ("Div") [0]);
} Else {
Blist. appendchild (barnode );
}
Blist. scrolltop = 0;
}
}
Window. onload = Init;
// -->
</SCRIPT>
</Head>
<Body>
<Div class = "barlist" id = "barlist">
<Div class = "rowline" style = "background-color: Red" style = "background-color: Red"> 1 </div>
<Div class = "rowline" style = "background-color: pink" style = "background-color: pink"> 2 </div>
<Div class = "rowline" style = "background-color: Blue" style = "background-color: Blue"> 3 </div>
<Div class = "rowline" style = "background-color: Gray" style = "background-color: Gray"> 4 </div>
</Div>
</Body>
</Html>
the usecapture parameter of addeventlistener is intended to be triggered 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 comments are more 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.
