js网页通用定时器

最新推荐文章于 2024-04-20 15:00:46 发布

shy_snow

最新推荐文章于 2024-04-20 15:00:46 发布

阅读量763

点赞数

本文链接：https://blog.csdn.net/shy_snow/article/details/75117439

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

写了一个通用的定时器，new了定时器之后，start，stop,clear都可以。可以抽成一个js文件。目前对于执行有参数的函数有点困难，暂时通过使用无参数函数包裹和全局变量的办法进行规避。

<html>
<script>
/**
 * 定时器
 * 
 */
/**
 * 以id为key的定时器map 可以通过$myTimerMap[id]来获取该id对应的定时器
 */
var $myTimerMap = {};

/**
 * 定时器对象， 
 * myTimer=new $myTimer(function(){alert(0)},500,1); 
 * myTimer.start();
 * myTimer.stop();
 * 
 * @param method
 *            执行的目标方法
 * @param interval
 *            定时执行间隔时间，单位毫秒
 * @param id
 *            一般使用正数,不设置id时会自动生成
 * @returns {$myTimer}
 */
$myTimer = function(method, interval, id)
{
    if (!interval || interval <= 0 || !method)
        return;
    if (!id)
        id = getSequence();
    console.log("$myTimer ", interval, id);
    this.timeout = false; // 启动及关闭按钮
    this.count = 0;
    this.maxCount=10000;
    this.id = id;
    this.interval = interval;
    this.method = method;
    this.settimeout;
    // 增加到map中
    debugger;
    if($myTimerMap[id]){
        $myTimerMap[id].clear();
    }
    $myTimerMap[id] = this;
    // 开始计时
    this.time = function(id)
    {
        var interval = $myTimerMap[id].interval;
        var timeout = $myTimerMap[id].timeout
        var count = ++$myTimerMap[id].count;
        var maxCount = $myTimerMap[id].maxCount;
        console.log(id, count, timeout, interval);
        if (timeout||count>maxCount)
        {
            console.log('$myTimerMap[', id, '] will be stopped.');
            return;
        }
        $myTimerMap[id].method();
        $myTimerMap[id].settimeout=setTimeout("$myTimerMap[" + id + "].time('" + id + "')", interval);
    }
    this.start = function (){ 
        if(!this.id){
            console.log('The timer has been cleared.');
            return;
        }
        console.log('$myTimerMap[', id, '] will be started.');
        this.time(this.id);
    }
    // 停止定时器
    this.stop = function()
    {
        console.log('$myTimerMap[', id, '] will be stopped.');
        this.timeout = true;
        if(this.settimeout)
        clearTimeout(this.settimeout);
    }
    //清除定时器
    this.clear=function()
    {
        this.stop();
        if(this.settimeout)
        clearTimeout(this.settimeout);
        if(this.id){
            this.method=null;
            $myTimerMap[this.id]=null;
            console.log('$myTimerMap[', id, '] will be clear.');
            this.id=null;
        }
    }
    // 获取执行次数
    this.getCount = function()
    {
        return this.count;
    }
    this.setMaxCount = function(max)
    {
    	if(max>100){max=100;}
    	this.maxCount=max;
    }
}
/**
 * 生成页面唯一的负数
 * @returns num
 */
var getSequence = _subId();
function _subId()
{
    var n = 0;
    function sub()
    {
        n--;
        console.log('getSequence:' + n);
        return n;
    }
    return sub;
}


myTimer = new $myTimer(function()
{
	    alert(0);
}, 3000, 1);
myTimer.start();
//myTimer.stop();	
</script>
	
</html>

原理就是在time定时方法里执行目标方法，并用setTimeout再调延时调用自己。有个变量作为是否停止定时器的开关，通过设置这个开关的值来停止计时。

shy_snow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js网页通用定时器

写了一个通用的定时器，new了定时器之后，start，stop,clear都可以。可以抽成一个js文件。目前对于执行有参数的函数有点困难，暂时通过使用无参数函数包裹和全局变量的办法进行规避。<html><script>/** * 定时器 * *//** * 以id为key的定时器map 可以通过$myTimerMap[id]来获取该id对应...
复制链接

扫一扫

专栏目录