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 ...

随机推荐

pomelo架构概览
pomelo之所以简单易用.功能全面,并且具有高可扩展性.可伸缩性等特点,这与它的技术选型和方案设计是密不可分的.在研究大量游戏引擎设计思路基础上,结合以往游戏开发的经验,确定了pomelo框架的设计 ...
php--无限极分类
效果图:
设计模式：享元模式（Flyweight）
定义:运用共享技术有效地支持大量细粒度的对象. 结构图: 内部状态:在享元对象内部并且不会随环境而改变的共享部分. 外部状态:随环境改变而改变的.不可共享的状态. Flyweight类,具体享元 ...
web调试工具-firebug
Firebug是网页浏览器firefox下面的一款开发类插件.它集HTML查看和编辑,js控制台,网络状况监视器于一体,是开发js,css,HTML:和Ajax的得力助手 (自己整理的,有错误的话见谅 ...
如何查看mysql版本
查到大概有5种,5.6.20就是版本号 1:在终端下:mysql -V. 以下是代码片段: 2:在mysql中:mysql> status;以下是代码片段: 3:在help里面查找,以下是代码片 ...
iOS 应用内跳转到appstore里下载
SKStoreProductViewController类是UIViewController的子类, 如果你对view controller比较熟悉的话,那SKStoreProductViewCont ...
Ext中解析字符串
Ext.encode()将json转为json字符串Ext.decode()将json字符串转为json
使用Storm实现实时大数据分析
摘要:随着数据体积的越来越大,实时处理成为了许多机构需要面对的首要挑战.Shruthi Kumar和Siddharth Patankar在Dr.Dobb’s上结合了汽车超速监视,为我们演示了使用Sto ...
5、JavaScript进阶篇②——函数、事件、内置对象
一.函数 1. 什么是函数函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...
javascript设计模式学习之九——命令模式
一.命令模式使用场景及定义命令模式常见的使用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道请求的具体操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求的发送者和 ...

浅谈JavaScript计时器