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和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 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
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python开发之str.format()用法实例分析
2016/02/22 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python3 Random模块代码详解
2017/12/04 Python
Django中使用Celery的方法示例
2018/11/29 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
对python中的装包与解包实例详解
2019/08/24 Python
通过python3实现投票功能代码实例
2019/09/26 Python
django中media媒体路径设置的步骤
2019/11/15 Python
mac使用python识别图形验证码功能
2020/01/10 Python
如何用Python徒手写线性回归
2021/01/25 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
教师党性分析材料
2014/02/04 职场文书
大学班级学风建设方案
2014/05/01 职场文书
小学课外阅读总结
2014/07/09 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
先进教师事迹材料
2014/12/16 职场文书