(PS:JavaScript 一个设定的时间间隔之后来执行代码,我们称之为计时事件。)

JavaScript 计时事件

通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()

setInterval() 第一个参数是函数(function)。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

实例

每三秒弹出 "hello" :

setInterval(function(){alert("Hello")},3000);
 

实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是手表一样。

实例

显示当前时间

var myVar=setInterval(function(){myTimer()},1000);

function
myTimer()
{
var d=new Date();
var
t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

 
 

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:

myVar=setInterval("javascript function",milliseconds);

然后你可以使用clearInterval() 方法来停止执行。

实例

以下例子,我们添加了 "Stop time" 按钮:

<p id="demo"></p>
<button onclick="myStopFunction()">Stop
time</button>

<script>
var
myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var
d=new Date();
var
t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function
myStopFunction()
{
clearInterval(myVar);
}
</script>

 

setTimeout() 方法

语法

window.setTimeout("javascript 函数",毫秒数);

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示:1000 毫秒等于一秒。

实例

等待3秒,然后弹出 "Hello":

setTimeout(function(){alert("Hello")},3000);
 

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。

实例

以下是同一个实例, 但是添加了 "Stop the alert" 按钮:

var myVar;

function
myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}

function
myStopFunction()
{
clearTimeout(myVar);
}

JavaScript 计时事件-setInterval()-clearInterval() -setTimeout()-clearTimeout()的更多相关文章

  1. JavaScript 计时事件

    JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计 ...

  2. 16 JavaScript计时事件&显示时钟

    计时事件:JavaScript设定一定的时间间隔之后来执行代码 window.setInterval("JavaScript function",millisecons):间隔指定 ...

  3. javaScript 笔记(4) -- 弹窗 & 计时事件 & cookie

    弹窗 可以在 JavaScript 中创建三种消息框:警告框.确认框.提示框. 警告框:经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: window ...

  4. js中setInterval与setTimeout用法

    setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式.     语法: setTimeout(code,millisec)     参数:     ...

  5. js中setInterval与setTimeout用法 实现实时刷新每秒刷新

    setTimeout 定义和用法:  setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式.     语法:  setTimeout(code,millisec)     参数:    ...

  6. js计时事件

    通过在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件. 1. setTimeout()--暂停指定的时间后执行指定的代码 clearTimeout ()--停止se ...

  7. JavaScript 计时

    http://www.w3school.com.cn/js/js_timing.asp JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码 ...

  8. JavaScript计时

    JavaScript计时分两种 setTimeout:程序在隔几秒后执行 语法: setTimeout(function(){要执行的程序},xxxx) setInterval:程序每隔几秒执行 语法 ...

  9. JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结

    已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...

随机推荐

  1. Android客户端与PC服务端、android服务端通过WiFi通信

    前期准备:我的是Linux Mint操作系统(总之折腾的过程中怀疑过是不是系统的问题),首先是要创建wifi热点给android手机使用,这个时候笔记本作为通信的服务器端,android手机作为客户端 ...

  2. 我对USB的认识

    一.USB协议规范 (1)      基本概念   每一个设备(device)会有一个或者多个的逻辑连接点在里面,每个连接点叫endpoint.每个endpoint有四种数据传送方式:控制(Contr ...

  3. ssm(Spring、Springmvc、Mybatis)实战之淘淘商城-第十四天(非原创)

    文章大纲 一.淘淘商城总体架构介绍二.淘淘商城重要技术点总结三.项目常见面试题四.项目学习(all)资源下载五.参考文章 一.淘淘商城总体架构介绍 1. 功能架构   2. 技术选型 (1)Sprin ...

  4. 如何进行大规模在线数据迁移(来自Stripe公司的经验)

    首发于笔者的微信公众号:技术心流FollowFlows 原文地址:Stripe Engineering Blog   各工程团队常面临一项共同挑战:重新设计数据模型以支持清晰准确的抽象和更复杂的功能. ...

  5. spring mvc 文件下载 get请求解决中文乱码问题

    方案简写,自己或有些基础的可以看懂,因为没时间写的那么详细 方案1 spring mvc解决get请求中文乱码问题, 在tamcat中server.xml文件 URIEncoding="UT ...

  6. JVM(一):Java内存区域与内存溢出异常

    一.运行时数据区 共分为5块: 程序计数器      (线程私有,当前线程所执行的字节码的行号指示器) Java虚拟机栈  (线程私有,证明周期与线程相同,描述的是Java方法执行的内存模型,每个方法 ...

  7. Vue.js(2.x)之Class 与 Style 绑定

    1.前面看数据绑定时还很困惑v-bind处理class时可以使用json格式的值,为什么换成id.href等其他属性就不行.看了下文档解释后明白了些: 2.对象语法主要有以下三种形式: 1)直接在v- ...

  8. IUserStore------Implements Diagram

  9. python3基础06(随机数的使用)

    #!/usr/bin/env python# -*- coding:utf-8 -*- import osimport randomimport string la=[0,1,2,3,4,5,6,7, ...

  10. 重置SQLSERVER表的自增列,让自增列重新计数【转】

    很多时候我们需要重置某个表的自增列,让自增列重新从1开始记数.最蠢的方法当然是把该表删掉再重新建表了.其实,还有其它的方法可以重置自增列的值: 方法一:使用TRUNCATE TABLE语句: TRUN ...