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 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
javascript 闭包疑问
Dec 30 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
编写自己的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 页面执行时间计算代码
2008/12/04 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
js写的评论分页(还不错)
2013/12/23 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
js获取隐藏元素的宽高
2017/02/24 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python实现数独算法实例
2015/06/09 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
基于python实现KNN分类算法
2020/04/23 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
楼面经理岗位职责范本
2014/02/18 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
国庆横幅标语
2014/10/08 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫