JavaScript 计时事件

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

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

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

1.setInterval() 方法

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

语法

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

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

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

第二个参数间隔的毫秒数

PS: 1000 毫秒是一秒。

如何停止执行?

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

语法

window.clearInterval(intervalVariable)

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

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

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

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

2.setTimeout() 方法

语法

t=window.setTimeout(javascript function",毫秒数);

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

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

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

如何停止执行?

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

语法

window.clearTimeout(timeoutVariable)

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

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

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

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

以下代码是我之前点击转换img代码的升级版,即 每隔3秒自动转换一次图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body onload="gaigai()">
<script>
function gaigai(){
setInterval(function ()
{
element=document.getElementById('im')
if (element.src.match("2"))
{
element.src="./1.jpg";
}
else
{
element.src="./2.jpg";
}
},3000);
}
</script> <img id="im" src="./2.jpg" /> </body>
</html>

JS之计时器的更多相关文章

  1. Nonove js timer 计时器

    <html> <head> <title> Nonove js timer 计时器 </title> </head> <body> ...

  2. js函数:setInterval()/clearInterval()——js网页计时器

    一.setInterval()/clearInterval()技术学习 都是window对象的方法,可以直接使用. setInterval(function(){},1000);:每1000毫秒执行一 ...

  3. JS倒计时器一只,顺便复习javascript时间相关函数

    window.onload = function(){ var uS = 604800; //后台提供 : 秒 var day=hour=minute=second=0, timer; var dem ...

  4. js异步计时器

    js中同步和异步的区别: 1.同步会阻塞代码执行,而异步不会 2.alert 是同步,setTimeout 是异步 何时需要异步 1.在可能发生等待的情况 2.等待过程中不能像 alert 一样阻塞程 ...

  5. js/javascript计时器方法及使用场景

    开博以备忘 JavaScript实现计时事件很容易,两个关键方法 setTimeout(“JavaScript语句”,毫秒)   未来的某时执行代码 clearTimeout()  取消setTime ...

  6. 原生js实现计时器

    https://www.cnblogs.com/sandraryan/ 点击开始计时,可以计次,暂停.点了暂停可以继续计时,计次,点击重置清空. <!DOCTYPE html> <h ...

  7. [原创作品]一个实用的js倒计时器 postby:zhutty.cnblogs.com

    今天做了一个手机短信发送倒计时,额,就是每隔多长时间可以重新发送的功能.贡献出来给园有吐槽点评. //倒计时,time:时长(秒),scb:每秒回调,cb:计时完成回调 var timing = fu ...

  8. 京东首页原生----js制作|css动画|js动画|计时器--轮播图(好久没更新,这两天闲的蛋疼做个京东页面分辨率1366*768,919京东,适应没调!)要文件加关注找我要哦!

  9. js用计时器加载大量dom

    改进前: <table><tbody></tbody></table> var tbody=document.getElementsByTagName( ...

随机推荐

  1. 设备指纹(Device Fingerprinting)是什么?

    简单来讲,设备指纹是指可以用于标识出该设备的设备特征或者独特的设备标识.设备指纹因子通常包括计算机的操作系统类型,安装的各种插件,浏览器的语言设置及其时区 .设备的硬件ID,手机的IMEI,电脑的网卡 ...

  2. oracle中给表和列起别名

    SELECT xxmc,sname as xsxm,sex,phone,address jzdz FROM student s LEFT JOIN xxjbxx x ON x.sid = s.sid ...

  3. ActiveMQ queue和topic,持久订阅和非持久订阅

    消息的 destination 分为 queue 和 topic,而消费者称为 subscriber(订阅者).queue 中的消息只会发送给一个订阅者,而 topic 的消息,会发送给每一个订阅者. ...

  4. ntpd修改版本号教程

    1.查看当前ntpd版本号 执行:ntpd -v 2.查看当前ntpd位置 执行:which ntpd 3.备份ntpd 执行:cp /usr/sbin/ntpd /usr/sbin/ntpd.bak ...

  5. MSOCache office问题

    \MSOCache 链接:https://pan.baidu.com/s/1dVvjYnD0D6DG6oFK_Mww2w密码:qrvp undefied

  6. POJ 2243 Knight Moves(BFS)

    POJ 2243 Knight Moves A friend of you is doing research on the Traveling Knight Problem (TKP) where ...

  7. 4.3 if-else语句使用

    Q:对输入的成绩进行登记划分. #include<iostream> #include<cstdio> using namespace std; int main() { in ...

  8. html5游戏之Box2d物理引擎集成

    前面两章我们已经研究了如何使用Box2d来模拟游戏世界,这一章就把所有的东西拼凑在一起,最终完成我们的游戏. 一.定义物体 典型的物体: {type:'ground',name:'dirt',x:50 ...

  9. PyCharm进行远程开发和调试linux服务器

    简介: 或许我也应该迁移到linux环境去开发. 最近写的一些小东西,在wnidows上开发,在windows上调试,都很正常.可是一旦放进linux服务器,就歇菜了. 那么我们有什么办法处理这个wi ...

  10. flask项目结构(二)创建flask,同步docker

    简介: 建立flask容易,那么部署就比较麻烦了,配这个,配那个,更新………… 所以我从构建,就考虑部署的问题,使用docker部署. 程序都打包进docker,本博客有相关文章. pycharn直接 ...