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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
Jquery api 速查表分享
Jan 12 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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的库,结果发现很多东西
2006/12/31 PHP
php 判断数组是几维数组
2013/03/20 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
浅谈PHP进程管理
2019/03/08 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python读取各种文件数据方法解析
2018/12/29 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
婚庆司仪主持词
2014/03/15 职场文书
门前三包责任书
2014/04/15 职场文书
感恩教育月活动总结
2014/07/07 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python