网站首页 语言 会计 电脑 医学 资格证 职场 文艺体育 范文

一个JavaScript的timer的代码

栏目: 网页设计 / 发布于: / 人气:1.11W

比起as3的Timer类,功能上略有改动

一个JavaScript的timer的代码

复制代码 代码如下:

/**

* Timer 模型

*

* @author rainsilence

* @version 2.0

*/

(function() {

/**

* TimerEvent constructor 构造器

*

* @param type 事件类型

* @param bubbles 是否毛票

* @param cancelable 是否可取消

*/

TimerEvent = function(type, bubbles, cancelable) {

= type;

les = bubbles;

elable = cancelable;

};

/**

* Event 时间事件声明

*

* @event TIMER

* @event TIMER_COMPLETE

*/

extend(TimerEvent, {

TIMER : "timer",

TIMER_COMPLETE : "timerComplete"

});

/**

* Event 方法

*

* @method toString

*/

extend(otype, {

toString : function() {

return "[TimerEvent type=" + +

" bubbles=" + les +

" cancelable=" + elable +"]";

}

});

/**

* Extend 扩展类,对象的属性或者方法

*

* @param target 目标对象

* @param methods 这里改成param也许更合适,表示承载着对象,方法的对象,用于target的扩展

*/

function extend(target, methods) {

if (!target) {

target = {};

}

for (var prop in methods) {

target[prop] = methods[prop];

}

return target;

}

/**

* Timer 构造器

*

* @param delay 延时多少时间执行方法句柄

* @param repeatCount 重复多少次,如果不设置,代表重复无限次

*/

Timer = function(delay, repeatCount) {

var listenerMap = {};

listenerMap[R] = [];

listenerMap[R_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

});

};

// 事件对象初始化(这部分未实现)

var timerEvent = new TimerEvent(R, false, false);

var timerCompleteEvent = new TimerEvent(R_COMPLETE, false, false);

/**

* Timer 计时器方法

*

* @method addEventListener 增加一个方法句柄(前两个参数必须,后一个参数可选)

* @method removeEventListener 移除一个方法句柄

* @method start 开始计时器

* @method stop 结束计时器

* @method reset 重置计时器

*/

extend(otype, {

addEventListener : function(type, listener, useCapture) {

if (type == R || type == R_COMPLETE) {

if (!listener) {

alert("Listener is null");

}

if (useCapture == true) {

ler[type]ce(0, 0, [listener]);

} else {

ler[type](listener);

}

}

},

removeEventListener : function(type, listener) {

if (type == R || type == R_COMPLETE) {

if (!listener) {

ler[type] = [];

} else {

var listeners = ler[type];

for (var index = 0; index < th; index++) {

if (listeners[index] == listener) {

ce(index, 1);

break;

}

}

}

}

},

start : function() {

var timerThis = this;

if (ing == true || mpleted) {

return;

}

if (ler[R]th == 0 &&

ler[R_COMPLETE]th == 0) {

alert("No Function");

return;

}

if (atType) {

rId = setInterval(function() {

dispachListener(ler[R], timerEvent);

entCount++;

}, y);

} else {

rId = setTimeout(function() {delayExecute(ler[R]);}, y);

}

ing = true;

function delayExecute(listeners) {

dispachListener(listeners, timerEvent);

entCount++;

if (entCount < atCount) {

if (ing) {

rId = setTimeout(function() {delayExecute(listeners);}, y);

}

} else {

ing = false;

}

if (ing == false) {

if (!mpleted) {

dispachListener(ler[R_COMPLETE], timerCompleteEvent);

}

mpleted = true;

}

}

function dispachListener(listeners, event) {

for (var prop in listeners) {

listeners[prop](event);

}

}

},

stop : function() {

ing = false;

if (rId == null) {

return;

}

if (atType) {

clearInterval(rId);

} else {

clearTimeout(rId);

}

if (!mpleted) {

var listeners = ler[R_COMPLETE];

for (var prop in listeners) {

listeners[prop](timerCompleteEvent);

}

}

mpleted = true;

},

reset : function() {

entCount = 0;

mpleted = false;

}

});

})();

接下来测试吧,大家见过新浪网上的滚动显示吗?用setTimeout写的,真叫牛叉。。。。。。换成Timer重构,简单易懂

复制代码 代码如下:

ine {

width: 400px;

height: 80px;

border-bottom-style: solid;

border-width: 1px;

}

ist {

border-style: solid;

border-width: 1px;

width:400px;

height: 80px;

overflow: hidden;

}

1

2

3

4

addEventListener的`useCapture参数本为捕获阶段触发之意,现在改成如果true,则在其他句柄之前触发,如果false,则在其他句柄之后触发。

后记:

现在貌似大家比较流行评论说明书的用法。。。比如struts+spring+hibernate。而忽略了编程的实质。希望大家多看源码,多讨论源码,那样才会有所谓的思想。否则人家今天用这个framework,明天换了。你又要从头开始了。