(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. UICollectionView笔记1

    WWDC 2012 Session笔记——205 Introducing Collection Views 这是博主的WWDC2012笔记系列中的一篇,完整的笔记列表可以参看这里.如果您是首次来到本站 ...

  2. iOS书摘之Objective-C编程之道 iOS设计模式解析

    来自<Objective-C编程之道iOS设计模式解析>一书的摘要总结 一.Prototype 原型模式 定义:使用原型实例指定创建对象的种类,并通过复制这个原型创建新的对象.(<设 ...

  3. redhat配置dns服务器bind

    配置Oracle11g的RAC需要使用DNS服务器来解析SCAN IP,本文就是以此为例介绍bind服务器的使用.首先科普一下bind服务器,属于企业级产品了,还是开源的: Bind是Berkeley ...

  4. springboot 学习笔记(七)

    (七)springboot整合activemq,消息消费,以及发送对象消息 1.springboot整合activemq发送消息,上一节已经介绍了,现在要对消息队列中的内容进行处理,下面写一个cons ...

  5. spring的工厂方法

    http://blog.csdn.net/nvd11/article/details/51542360

  6. Django的路由层和视图层

    一丶Django 的路由层(URLconf) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django ...

  7. JS获取本地文件并且解析文件内容(XML,TXT)

    $(function(){ $("body").on("change", "#file", function (event) { uploa ...

  8. Spark性能优化——和shuffle搏斗

    Spark的性能分析和调优很有意思,今天再写一篇.主要话题是shuffle,当然也牵涉一些其他代码上的小把戏. 以前写过一篇文章,比较了几种不同场景的性能优化,包括portal的性能优化,web se ...

  9. 2017.12.1 如何用java写出一个菱形图案

    上机课自己写的代码 两个图形原理都是一样的 1.一共有仨个循环 注意搞清楚每一层循环需要做的事情 2.第一层循环:是用来控制行数 3.第二层循环控制打印空格数 4.第三层循环是用来循环输出星星 imp ...

  10. 分词,复旦nlp,NLPIR汉语分词系统

    http://www.nlpir.org/ http://blog.csdn.net/zhyh1986/article/details/9167593