学习js,因为函数和定时器直接的关系是非绑定的。我不能说我开启一个定时,然后拿一个变量去记录这个setInterval的返回值,这样很麻烦。

本着面向对象的思想,利用业余时间(周末在家里)写了一个类,用来管理定时器。

吐槽下jQuery,不知道是不是我的jQuery版本太低,貌似jQuery没有提供很好的定时器管理类。

好废话不多说,上代码:

function TimeControlEx() {
var nCount = 0;
var oTimerIDs = []; //ID,Name
var that = this;
var nTimerId = 0;
this.ExecOnce = function (funcid) {
if (oTimerIDs[funcid].Limit == 0) {
//只要归零了,肯定是定时的,对于这种,就得关闭
clearInterval(oTimerIDs[funcid].TimerID);
}
};
this.add = function (nSec, oFunction, sName, nTimes) {
///<param name="nSec">延迟时间,毫秒</param>
///<param name="oFunction">调用函数</param>
///<param name="sName">定时器名称(可选)</param>
///<param name="nTimes">循环次数(可选)</param>
//todo:根据各个参数来创建,基础的参数是nSec和oFunction
var nParams = arguments.length;
var obj;
switch (nParams) {
case 2:
//两个参数,自动增加
nTimerId = setInterval(oFunction, nSec);
obj = {
ID: nCount,
TimerID:nTimerId,
Name: String(nCount),
Interval: nSec,
Limit: -1
};
oTimerIDs.push(obj);
break;
case 3:
//三个参数
nTimerId = setInterval(oFunction, nSec);
obj = {
ID: nCount,
TimerID: nTimerId,
Name: sName,
Interval: nSec,
Limit: -1
};
oTimerIDs.push(obj);
break;
case 4:
//四个参数
obj = {
ID: nCount,
TimerID: nTimerId,
Name: sName,
Interval: nSec,
Limit: nTimes
};
oTimerIDs.push(obj);
break;
default:
return;
}
};
this.CloseTimer = function (sTimerName) {
///<param name="sTimerName">计时器的名字,或ID</param>
if (typeof (sTimerName) == "number") {
//按照数字方法关闭
for (var j = 0; j < oTimerIDs.length; j++) {
if (oTimerIDs[j].ID == sTimerName) {
clearInterval(oTimerIDs[j].TimerID);
oTimerIDs = oTimerIDs.splice(j, 1);
nCount--;
break;
}
}
} else {
//按照字符串方式关闭
for (var m = 0; m < oTimerIDs.length; m++) {
if (oTimerIDs[m].Name == sTimerName) {
clearInterval(oTimerIDs[m].TimerID);
oTimerIDs.splice(m, 1);
nCount--;
break;
}
}
}
};
}

编辑:今天查看后,发现代码存在严重的bug,修复了一下,现在放出修改后的代码:

 function TimeControlEx() {
var nCount = 0;
var oTimerIDs = []; //ID,Name
var that = this;
var nTimerId = 0;
this.ExecOnce = function (funcid) {
if (oTimerIDs[funcid].Limit == 0) {
//只要归零了,肯定是定时的,对于这种,就得关闭
clearInterval(oTimerIDs[funcid].TimerID);
}
};
this.add = function (nSec, oFunction, sName, nTimes) {
///<param name="nSec">延迟时间,毫秒</param>
///<param name="oFunction">调用函数</param>
///<param name="sName">定时器名称(可选)</param>
///<param name="nTimes">循环次数(可选)</param>
//todo:根据各个参数来创建,基础的参数是nSec和oFunction
var nParams = arguments.length;
var obj;
switch (nParams) {
case 2:
//两个参数,自动增加
nTimerId = setInterval(oFunction, nSec);
obj = {
ID: nCount,
TimerID: nTimerId,
Name: String(nCount),
Interval: nSec,
Limit: -1
};
oTimerIDs.push(obj);
break;
case 3:
//三个参数
nTimerId = setInterval(oFunction, nSec);
obj = {
ID: nCount,
TimerID: nTimerId,
Name: sName,
Interval: nSec,
Limit: -1
};
oTimerIDs.push(obj);
break;
case 4:
//四个参数
obj = {
ID: nCount,
TimerID: 0,
Name: sName,
Interval: nSec,
Limit: nTimes
};
var oFunc = function (oThis, oMyFunc) {
var oThat = oThis;
var oMyFun = oMyFunc;
var oRun = function () {
if (oThat.Limit > 0 || oThat.Limit == -1) {
oMyFun(); //执行传入的函数
if (oThat.Limit > 0) oThat.Limit--;
} else {
//自行了断
clearInterval(oThat.TimerID);
}
};
return oRun;
};
nTimerId = setInterval(oFunc(obj, oFunction), nSec);
obj.TimerID = nTimerId;
oTimerIDs.push(obj);
break;
default:
return;
}
};
this.CloseTimer = function (sTimerName) {
///<param name="sTimerName">计时器的名字,或ID</param>
if (typeof (sTimerName) == "number") {
//按照数字方法关闭
for (var j = 0; j < oTimerIDs.length; j++) {
if (oTimerIDs[j].ID == sTimerName) {
clearInterval(oTimerIDs[j].TimerID);
oTimerIDs = oTimerIDs.splice(j, 1);
nCount--;
break;
}
}
} else {
//按照字符串方式关闭
for (var m = 0; m < oTimerIDs.length; m++) {
if (oTimerIDs[m].Name == sTimerName) {
clearInterval(oTimerIDs[m].TimerID);
oTimerIDs.splice(m, 1);
nCount--;
break;
}
}
}
};
}

谢谢大家的支持

一个JS定时器类的更多相关文章

  1. 一个js验证类

    //******************************************************************* //作者: 丁伯洋 //日期: 2006-4-27 //概要 ...

  2. 我的第一个JS组件-跨浏览器JS调试工具

    武汉九天鸟-p2p网贷系统开发-互联网应用软件开发 公司官网:http://jiutianniao.com  社交问答:http://ask.jiutianniao.com 最近,在看公司一个JS大牛 ...

  3. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  4. js定时器的使用(实例讲解)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...

  5. 怎么使用jquery判断一个元素是否含有一个指定的类(class)

    在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class).两种方法有着相同的功能.2种方法如下:(个人喜欢用hasClass()) 1.           hasClass( ...

  6. 移动Web与js定时器暂停或不准确计时的问题解决

    PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...

  7. js定时器、高亮修改单元格背景色

    window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) 解释:code:在定时时间到时要执行的J ...

  8. js定时器 特定时间执行某段程序的例子

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...

  9. JS创建类和对象

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

随机推荐

  1. java序列化---转

    Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是 ...

  2. phpcmsv9如何实现添加栏目时不在首页内容区显示只在导航栏显示

    之前王晟璟一直使用PHPCMSV9系统建过自己的个人门户网站,同时也建立了一个其他类型的网站,感觉非常不错,我不得不说PHPCMSV9的功能非常齐全,非常强大. 但有一点时常让王晟璟感到很烦脑,那就是 ...

  3. 剑指offer系列21--二叉搜索树的后续遍历序列

    * 21[题目]输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果. * 如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. * [注]二叉搜索树特点:左子树比根结 ...

  4. CentOS7安装Oracle 11g R2 详细过程——零基础

    本人linux小白,因项目原因必须要在linux下使用oracle便开始了探索.安装过程中遇到了种种问题与原因,今天整理一下方便后面的可以少走弯路. *注明: 安装过程注意当前错作的用户,执行./ru ...

  5. Tomcat服务器搭建

    一.JDK环境搭建 二.tomcat下载安装 三.tomcat服务启动 cmd> net start  tomcat8 四.查看tomcat服务器启动情况: http://localhost:8 ...

  6. 【转】SQL SERVER标量表达式的隐式转换

    在SQL Server中的数据类型中,存在着优先级的问题.标量表达示的返回结果类型也会根据操作数的类型而定,如1 +'1'=2.而不是'11',因些Int型的优先级比VARCHAR型的优先级要高.所以 ...

  7. C#如何使用HttpWebRequest、HttpWebResponse模拟浏览器抓取网页内容

    public string GetHtml(string url, Encoding ed) { string Html = string.Empty;//初始化新的webRequst HttpWeb ...

  8. solr环境搭建

    介绍摘自百度百科:Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过 ...

  9. DBA_Oracle Erp升级时如何确定具体的Patch ID(案例)

    2014-07-03 Created By BaoXinjian

  10. PLSQL_Oracle Object所有数据库对象类型汇总和简解(概念)

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...