- 相關(guān)推薦
一個(gè)JavaScript的timer的代碼
比起as3的Timer類，功能上略有改動(dòng)
timer2.src.js
復(fù)制代碼 代碼如下:
/**
* Timer 模型
*
* @author rainsilence
* @version 2.0
*/
(function() {
/**
* TimerEvent constructor 構(gòu)造器
*
* @param type 事件類型
* @param bubbles 是否毛票
* @param cancelable 是否可取消
*/
TimerEvent = function(type, bubbles, cancelable) {
this.type = type;
this.bubbles = bubbles;
this.cancelable = cancelable;
};
/**
* Event 時(shí)間事件聲明
*
* @event TIMER
* @event TIMER_COMPLETE
*/
extend(TimerEvent, {
TIMER : "timer",
TIMER_COMPLETE : "timerComplete"
});
/**
* Event 方法
*
* @method toString
*/
extend(TimerEvent.prototype, {
toString : function() {
return "[TimerEvent type=" + this.type +
" bubbles=" + this.bubbles +
" cancelable=" + this.cancelable +"]";
}
});
/**
* Extend 擴(kuò)展類，對(duì)象的屬性或者方法
*
* @param target 目標(biāo)對(duì)象
* @param methods 這里改成param也許更合適，表示承載著對(duì)象，方法的對(duì)象，用于target的擴(kuò)展
*/
function extend(target, methods) {
if (!target) {
target = {};
}
for (var prop in methods) {
target[prop] = methods[prop];
}
return target;
}
/**
* Timer 構(gòu)造器
*
* @param delay 延時(shí)多少時(shí)間執(zhí)行方法句柄
* @param repeatCount 重復(fù)多少次，如果不設(shè)置，代表重復(fù)無限次
*/
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
});
};
// 事件對(duì)象初始化（這部分未實(shí)現(xiàn)）
var timerEvent = new TimerEvent(TimerEvent.TIMER, false, false);
var timerCompleteEvent = new TimerEvent(TimerEvent.TIMER_COMPLETE, false, false);
/**
* Timer 計(jì)時(shí)器方法
*
* @method addEventListener 增加一個(gè)方法句柄（前兩個(gè)參數(shù)必須，后一個(gè)參數(shù)可選）
* @method removeEventListener 移除一個(gè)方法句柄
* @method start 開始計(jì)時(shí)器
* @method stop 結(jié)束計(jì)時(shí)器
* @method reset 重置計(jì)時(shí)器
*/
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;
}
});
})();
接下來測試吧，大家見過新浪網(wǎng)上的滾動(dòng)顯示嗎？用setTimeout寫的，真叫牛叉。。。。。。換成Timer重構(gòu)，簡單易懂
timerTest.html
復(fù)制代碼 代碼如下:
.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;
}
1
2
3
4
addEventListener的useCapture參數(shù)本為捕獲階段觸發(fā)之意，現(xiàn)在改成如果true,則在其他句柄之前觸發(fā)，如果false，則在其他句柄之后觸發(fā)。
后記：
現(xiàn)在貌似大家比較流行評(píng)論說明書的用法。。。比如struts+spring+hibernate。而忽略了編程的實(shí)質(zhì)。希望大家多看源碼，多討論源碼，那樣才會(huì)有所謂的思想。否則人家今天用這個(gè)framework，明天換了。你又要從頭開始了。
【一個(gè)JavaScript的timer的代碼】相關(guān)文章：
高效編寫JavaScript代碼的技巧08-25
在Java中執(zhí)行JavaScript代碼07-14
JavaScript實(shí)現(xiàn)網(wǎng)頁刷新代碼段08-07
常用排序算法之JavaScript實(shí)現(xiàn)代碼段06-04
網(wǎng)頁程序設(shè)計(jì)之實(shí)用JavaScript代碼段09-23
關(guān)jQuery彈出窗口簡單實(shí)現(xiàn)代碼-javascript編程06-07
關(guān)于TimerTask與Timer類的應(yīng)用09-04
關(guān)于ASP.NET使用JavaScript顯示信息提示窗口實(shí)現(xiàn)原理及代碼05-09
對(duì)javascript的理解08-08
常用的JavaScript模式09-22