JavaScript两大定时器


0.前言

有一段时间没有写博客了,不过令我高兴地是写了这么长时间的文章,终于收到了关注和评价,在首页上通过了文章,非常高兴,也很兴奋!!好了言归正传,我来分享一下今天主要的知识点:间歇性定时器延时定时器。学完这个,我们可以写一些时钟、秒表、进度条等有趣控件。

1.间歇性定时器——setInterval

格式:setInterval(参数1,参数2);
参数:参数1表示函数名,参数2表示设置的时间(毫秒);
功能:每间隔参数2时间,调用一次参数1函数;
返回值:定时器的id,可单位是毫秒以通过这个id关闭定时器

(1)创建定时器

var timer = setInterval(func,1000);
用一个变量保存定时器,注意,用setInterval创建定时器即启动,同时返回该定时的id。

(2)关闭定时器

既然创建了定时器,那么如何关闭定时器呢?
通过返回得到定时器的id,从而关闭定时器。用clearInterval方法。
clearInterval(timer);
其中的“timer”表示的是上面常见定时器器是所用的变量。
注意:JS中没有暂停一说,关闭就销毁了。如果需要继续运行,则需重新创建定时器。

2.延时定时器——setTimeout

格式:setTimeout(参数1,参数2);
参数:参数1表示的是函数名,参数2表示设置的时间(毫秒);
功能:参数2时间后调用参数1函数;
返回值:返回定时器的id,可以通过该id关闭定时器

(1)创建定时器

var timer = setTimeout(func,1000);

(2)关闭定时器

clearTimeout(timer);


3.两者比较

用setInterval创建定时器是载入界面后,每间隔参数2个时间,执行一次参数1函数,是连续执行的;而setTimeout创建的定时器是先执行参数2,然后再执行参数1,记住只执行一次参数1,不是连续的。

4.案例

说了这么多,可能感觉到非常晕,下面我来用例子说明上面的问题。
(1)setInterval
首先我们打个界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器-间歇性定时器</title>
</head>
<body>
    <button onclick="consoleInterval()">关闭定时器(暂停)</button>
    <button onclick="goOn()">继续</button>
</body>
</html>

运行结果如下:

捕获.PNG

然后编写函数,在body标签里面添加如下代码:

<script type="text/javascript">
        var timer = window.setInterval(func,1000);
        function func() {
            console.log("hello world!!!");
        }

        function consoleInterval() {
            window.clearInterval(timer);
        }
        function goOn() {
            timer = window.setInterval(func,1000);
        }
    </script>

此时在控制台上的结果为:

捕获.PNG

出现的bug
  当我们连续点击“继续”按钮发现打印的速度变得非常快,而且再点击关闭定时器会发下,管不了,这是为什么呢?
因为,当我们连续点击继续按钮时,相当于创建了多个定时器,再点关闭按钮,他只能关闭当前最后一次点击时出现的定时器,前面创建的的定时器是关闭不了的,所以会出现上述情况。
解决办法:用一个变量来判断定时器是存在的还会被注销了。
修改js代码如下:

<script type="text/javascript">
        var timer = window.setInterval(func,1000);
        var flag = true;

        function func() {
            console.log("hello world!!!");
        }

        function consoleInterval() {
            window.clearInterval(timer);
            flag = false;
        }
        function goOn() {

            if(flag){
                return;
            }
            timer = window.setInterval(func,1000);
            flag = true;
        }
    </script>

详解:
  在一开始创建定时器时,将flag设置为true,表示当前存在定时器。当点击“关闭”按钮时,相当于销毁了定时器,此时将flag设置为false,表示没有定时器的存在;当调用“继续”按钮时,首先要判断flag,如果flag为true,表示当前有定时器,不需要创建了,不会再执行后面的代码,若果flag为false,表示没有定时器,就可以创建定时器,从而有效的避免上述出现的问题。


5.总结

终于说完了,累死我了,关于这两个定时器,我知道的也就这么多了,谢谢打赏!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • 前言:在引用开发中,我们经常需要在页面中执行一些周期性的操作,比如每隔一段时间就执行某一固定的操作。而对于这样的操...
    帅帅哒小白阅读 5,295评论 1 3
  • https://nodejs.org/api/documentation.html 工具模块 Assert 测试 ...
    KeKeMars阅读 6,297评论 0 6
  • 时光没有长度 但是可以有厚度 不主动活的有厚度 就只有反思自己的理念 是否有无毒 虚度光阴没有错 错在不反思为何虚度
    10086好阅读 247评论 0 0
  • 面对你的文字,我不知该如何描述, 有时浅薄的语言让你难受, 有时深切的话语又让你深思。 你或许在求得记下生活点滴中...
    _山枕檀痕涴_阅读 122评论 0 0