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 相关文章推荐
改变隐藏的input中value的值代码
Dec 30 Javascript
JavaScript简介
Feb 15 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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实现异步操作的研究
2013/02/03 PHP
php三元运算符知识汇总
2015/07/02 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python实现注册、登录小程序功能
2018/09/21 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python Django view 两种return的实现方式
2020/03/16 Python
如何解决安装python3.6.1失败
2020/07/01 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
大学生志愿者感言
2014/01/15 职场文书
会议主持词
2014/03/17 职场文书
匿名检举信范文
2015/03/02 职场文书
同事离别感言
2015/08/04 职场文书