浅谈JavaScript计时器
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 ...
随机推荐
- 移动设备优先viewport
Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备.这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备. 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的 ...
- C#访问url地址并返回数据
public partial class Form1 : Form { static bool isSelect = false; public Form1() { InitializeCompone ...
- appium关于定位元素
Windows上定位元素我用的是uiautomatorviewer 这个工具在你的SDK-tools目录下,点击uiautomatorviewer.bat启动,注意appium在跑的时候是取不到的 工 ...
- iOS UIImageView 显示不规则图片只显示图片一部分保证图片不被压缩
//只需如下设置imageView [picImg setContentScaleFactor:[[UIScreenmainScreen] scale]]; picImg.contentMode = ...
- PostgreSQL 对字段大小写敏感
缘起 iso=> \d+ test; Table "public.test" Column | Type | Modifiers | Storage | Descriptio ...
- Django 学习
urls.py 路由系统 from django.conf.urls import url,includefrom django.contrib import adminfrom web import ...
- mysql 模块使用
import MySQLdb conn = MySQLdb.connect(host=',db='fengjian') cur = conn.cursor() sql = 'insert into a ...
- java对象占多少内存
通常来说Hotspot jvm的对内存中的对象由以下几个部分组成 一个对象头,包含了一些整理工作所需信息 原始类型字段,不同类型大小各异(表1) 引用字段,占据4个字节(byte) 填充,在对象的末尾 ...
- fail2ban使用
转子: http://www.2cto.com/Article/201406/310910.html 1.fail2ban简介: fail2ban可以监视你的系统日志,然后匹配日志的错误信息(正则式匹 ...
- Real-Time SQL Monitoring
Real-Time SQL Monitoring可以在sql运行的时候监控其性能. 缺省情况下,单个sql执行花费的CPU或I/O时间超过5秒或sql并行执行的时候,Real-Time SQL Mon ...