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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
js实现头像上传并且可预览提交
Dec 25 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+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Django通过json格式收集主机信息
2020/05/29 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
生活部的活动方案
2014/08/19 职场文书
敬老月活动总结
2014/08/28 职场文书
完整版商业计划书
2014/09/15 职场文书
2014年消防工作总结
2014/11/21 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python