JavaScript Timer implementation code_time and date

ok, no more nonsense, let’s implement a javascript Timer
Compared with the as3 Timer class, the function is slightly changed
timer2.src.js

Copy code The code is as follows:

/**
* 타이머 모델
*
* @author rainsilence
* @version 2.0
*/
(function() {
/**
* TimerEvent 생성자 생성자
*
* @param 유형 이벤트 유형
* @param 조잡 여부 거품
* @param 취소 가능 여부 취소 가능
*/
TimerEvent = function(유형, 버블, 취소 가능) {
this.type = 유형;
this.bubbles = bubble;
this.cancelable = 취소 가능;
/**
* 이벤트 시간 이벤트 선언
*
* @event TIMER
* @event TIMER_COMPLETE
*/
extend(TimerEvent, {
TIMER : "타이머",
TIMER_COMPLETE : "timerComplete"
})
/**
* 이벤트 메소드
*
* @method toString
*/
extend(TimerEvent.prototype, {
toString : function() {
return "[TimerEvent type=" this.type
" bubble=" this.bubbles
" cancelable=" this.cancelable "]"
}
}); >/**
* 확장 클래스, 객체 속성 또는 메소드
*
* @param target target object
* @param 메소드 여기서는 param으로 변경하는 것이 더 적절할 수 있습니다. 이는 전달하는 객체를 의미합니다. 대상 개체 및 메서드 확장
*/
functionextend(target,methods) {
if (!target) {
target = {}
}
for (var prop inmethods) ) {
target[prop] = 메소드[prop];
return target;
}
/**
* 타이머 생성자
*
* @param Delay 메소드 핸들 실행을 지연하는 시간
* @parampeatCount 반복 횟수, 설정하지 않으면 무제한 반복을 의미합니다
*/
Timer = function(delay,peatCount) ) {
var ListenerMap = {};
listenerMap[TimerEvent.TIMER] = []
listenerMap[TimerEvent.TIMER_COMPLETE] = []
extend(this, {
currentCount: 0,
running : false,
delay : 지연,
repeatCount :peatCount,
// true:Interval,false:Timeout
repeatType :peatCount == null || 반복카운트 < 1? true : false,
handler : listeningMap,
timerId : 0,
isCompleted : false
});
};
// 事件对象初始化(这part分未实现)
var timeEvent = new TimerEvent(TimerEvent.TIMER, false, false);
var 타이머CompleteEvent = new TimerEvent(TimerEvent.TIMER_COMPLETE, false, false);
/**
* 타이머 타이머 메소드
*
* @method addEventListener 메소드 핸들 추가(처음 두 매개변수는 필수, 마지막 매개변수는 선택사항)
* @method RemoveEventListener 메소드 핸들 제거
* @method start는 타이머를 시작합니다
* @method stop은 타이머를 종료합니다
* @method Reset은 타이머를 재설정합니다
*/
extend(Timer.prototype, {
addEventListener : function(type, Listener, useCapture) {
if (type == TimerEvent.TIMER || type = = TimerEvent.TIMER_COMPLETE) {
if (!listener) {
alert("Listener가 null입니다.");
}
if (useCapture == true) {
this.handler[type ].splice(0, 0, [리스너]);
} else {
this.handler[type].push(리스너)
}
}
},
RemoveEventListener : 함수(유형, 리스너) {
if (유형 == TimerEvent.TIMER || 유형 == TimerEvent.TIMER_COMPLETE) {
if (!listener) {
this.handler[type] = [ ];
} else {
var listenings = this.handler[type];
for (var index = 0; index < listenings.length; index ) {
if (listeners[index] == 리스너) {
listeners.splice(index, 1);
break;
}
}
}
}
},
start : function( ) {
var 타이머This = this; if (this.running == true || this.isCompleted) {
return;
}
if (this.handler[TimerEvent.TIMER] .length == 0 &&
this.handler[TimerEvent.TIMER_COMPLETE].length == 0) {
alert("함수 없음");
반환;
}
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 지연Execute(리스너) {
dispachListener(리스너, 타이머이벤트);
timerThis.currentCount ;
if (timerThis.currentCount 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 listeningrs) {
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 listenings = this.handler[TimerEvent.TIMER_COMPLETE];
for (var prop in listeningrs) {
listeners[prop](timerCompleteEvent);
}
}
this.isCompleted = true;
},
reset : function() {
this.currentCount = 0;
this.isCompleted = false;
}
}) ;
})();

Let’s test it next. Have you ever seen the scrolling display on Sina? Written using setTimeout, it’s really awesome. . . . . . Replace with Timer and refactor, simple and easy to understand
timerTest.html

Copy code The code is as follows:

< title>Insert title here




< ;div class="barList" id="barList">

1

2

3

4

The useCapture parameter of addEventListener is triggered in the capture phase Meaning, now it is changed to if true, it will be triggered before other handles, if false, it will be triggered after other handles.
Postscript:
It seems that it is more popular now to comment on the usage of instructions. . . For example struts spring hibernate. And ignore the essence of programming. I hope everyone will read the source code more and discuss the source code more, only then will there be so-called thoughts. Otherwise, people use this framework today and change it tomorrow. You have to start from scratch again.