JavaScript计时器

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函数节流
浅谈javascript函数节流什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
浅谈JavaScript中的闭包
浅谈JavaScript中的闭包在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
浅谈JavaScript浮点数及其运算
原文:浅谈JavaScript浮点数及其运算 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...
浅谈 JavaScript 编程语言的编码规范
对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...
浅谈javascript的原型及原型链
浅谈javascript的原型及原型链这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性只要创建了一个函数,就会为 ...
浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
浅谈JavaScript中的正则表达式（适用初学者观看）
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
[转载]浅谈JavaScript函数重载
原文地址:浅谈JavaScript函数重载作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...
浅谈JavaScript中的内存管理
一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...

随机推荐

C/C++的编译器|编译环境（非常全面的比较）
C/C++编译器的一些易混淆概念,总结一下. 关于什么是Unix-like操作系统,常见操作系统间差异,什么是操作系统接口等等,请参考<操作系统宝鉴>. C/C++编译器有哪些? 首先是如 ...
ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click 'Restart'
ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click ...
创建ArcGIS API for JavaScript的第一个示例程序
原文:创建ArcGIS API for JavaScript的第一个示例程序在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...
ECSHOP给分类添加图
1.修改/admin/template/category_info.html <tr> <td>{$lang.cat_img}:</td> <td> & ...
Java学习-004-传世经典Helloworld
此文主要通过一个广为人知的传世经典应用(Helloworld)讲述 Java 程序的结构,Java 程序的开发步骤,以及 Java 程序是如何运行的. 一.开发 Java 程序步骤开发 Java 程 ...
[代码片段]YEAH!连通域标记和计数
//标记的连通域存储在buff[]里 //返回值为连通域个数 int LinkBlob(unsigned char **imagedata,unsigned char buff[], int heig ...
使用TortoiseGit将代码上传到bitbucket
首先需要有一个bitbucket的账户,这是无疑问的. 比如我本地有一个项目,项目名是我想把这个项目托管到bitbucket上! 1.首先在bitbucket上创建一个仓库,注意仓库的名字要和项目的 ...
extern 和 static和今天的一些代码，12-03
这是关于标识符的链接属性的,链接属性只有三种:external, internal, none 改变规则: 3.1 文件作用域的变量和函数定义,即在所有代码块和参数列表之外的标识符,使用static ...
sublime3使用
http://dengo.org/archives/923 这篇博客的写的很好!
RHEL6解决无法使用YUM源问题
RHEL的YUM源需要注册用户才能更新使用,由于CentOS和RHEL基本没有区别,并且CentOS已经被REHL收购.所以将RHEL的YUM源替换为CentOS即可.问题如下:[root@bogon ...

浅谈JavaScript计时器