JavaScript计时器示例分析


Posted in Javascript onFebruary 05, 2015

1.什么是JavaScript计时器?

在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。

2.计时器类型

一次性计时器:仅在指定的延迟时间之后触发一次。
间隔性触发计时器:每隔一定的时间间隔就触发一次

3.计时器方法

1):一次性计时器

A):setTimeout(): 指定的延迟时间之后来执行代码,进执行一次

语法:setTimeout(代码,延迟时间);

参数说明:

1. 要调用的函数或要执行的代码串。
2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

B):clearTimeout():取消setTimeout()设置

语法:clearTimeout(timer)

参数说明:
timer:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

调用setTimeout()和clearTimeout()延迟方法:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JavaScript计时器</title>

        <input type="button" value="开始" id="btnStart" onclick="StartPrint()">

        <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">

        <br>

    </head>

    <body>

        <script type="text/javascript">

            //定义打印方法

            function Print()

            {

                console.log("我在打印!");

            }

            var timer;//该值标识要取消的延迟执行代码块

            //开始打印

            function StartPrint()

            {

                timer=setTimeout(Print,1000);//调用计时器,延迟1秒打印,只执行一次

            }

            //结束打印

            function StopPrint()

            {

                clearTimeout(timer);//取消计时器

            }

        </script>

    </body>

</html>

调用setTimeout()和clearTimeout()无限循环方法:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JavaScript计时器</title>

        <input type="button" value="开始" id="btnStart" onclick="StartPrint()">

        <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">

        <br>

    </head>

    <body>

        <script type="text/javascript">

            //定义打印方法

            function Print()

            {

                console.log("我在打印!");

                timer=setTimeout(Print,1000);//开始计时器,调用自己,进行无穷循环

            }

            var timer;//该值表示要取消延迟执行的代码块

            //开始打印

            function StartPrint()

            {

                Print();//调用打印方法

            }

            //结束打印

            function StopPrint()

            {

                clearTimeout(timer);//取消计时器

            }

        </script>

    </body>

</html>

 
2):间隔性触发计时器

A):setInterval():在执行时,从载入页面后每隔指定的时间执行代码

语法:setInterval(代码,交互时间);

参数说明:

1. 代码:要调用的函数或要执行的代码串。

2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000) 或 setInterval(clock,1000)

B):clearInterval() 方法可取消由 setInterval() 设置的交互时间

语法:clearInterval(timer)

参数说明:
timer:由 setInterval() 返回的 ID 值。

调用setInterval()和clearInterval() 执行间隔执行方法实例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JavaScript计时器</title>

        <input type="button" value="开始" id="btnStart" onclick="StartPrint()">

        <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">

        <br>

    </head>

    <body>

        <script type="text/javascript">

            //定义打印方法

            function Print()

            {

                console.log("我在打印!");

            }

            var timer;//该值标识要取消的计时器执行代码块

            //开始打印

            function StartPrint()

            {

            timer=setInterval("Print()",1000);//开始计时器

            }

            //结束打印

            function StopPrint()

            {

                clearInterval(timer);;//取消计时器

            }

        </script>

    </body>

</html>

以上就是本文所述的全部内容了,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 #Javascript
使用pjax实现无刷新更改页面url
Feb 05 #Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 #Javascript
jquery手风琴特效插件
Feb 04 #Javascript
Jquery中find与each方法用法实例
Feb 04 #Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 #Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 #Javascript
You might like
我的论坛源代码(六)
2006/10/09 PHP
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP7新增函数
2021/03/09 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
前端微信支付js代码
2016/07/25 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
angular十大常见问题
2017/03/07 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python编程求质数实例代码
2018/01/31 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
要账委托书范本
2014/09/15 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
Python OpenCV实现图形检测示例详解
2022/04/08 Python
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android