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. python 线程 进程

    1.进程与线程优.缺点的比较总言:使用进程和线程的目的,提高执行效率. 进程: 优点:能利用机器的多核性能,同时进行多个操作. 缺点:需要耗费资源,重新开辟内存空间,耗内存. 线程: 优点:共享内存( ...

  2. 1004. Max Consecutive Ones III最大连续1的个数 III

    网址:https://leetcode.com/problems/max-consecutive-ones-iii/ 参考:https://leetcode.com/problems/max-cons ...

  3. flex对象.show()的时候display变成block

    在css中设置display: none;的对象会出现这种情况. 在JavaScript中用.hide()隐藏的对象不会出现.

  4. List Available DBCC Commands

    DBCC Commands or Database Consistency Checker commands have been with SQL Server from its early ages ...

  5. 你还有没有印象？腾讯QQ16个版本界面你认识多少？

    腾讯公司成立于1998年11月11日(马化腾也曾经戏称“腾讯公司的生日被马云弄成双11购物节了”).1997年,马化腾接触到了ICQ:1998年11月11日,马化腾和同学张志东在广东省深圳市注册成立“ ...

  6. Python3+selenium+BaiduAI识别并下载花瓣网高颜值妹子图片

    一.说明 1.1 背景说明 上周在“Python3使用百度人脸识别接口识别高颜值妹子图片”中自己说到在成功判断颜值后,下截图片并不是什么难点. 直观感觉上确实如此,你判断的这个url适不适合下载,适合 ...

  7. python（3）之字符串

    字符串常用操作如下: name="huang yuqing"print(name.count("h"))#计算包含字符的个数print(name.capital ...

  8. Win10系列：JavaScript综合实例1

    上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识 ...

  9. Java单例模式《一》饿汉式

    package com.study.mode; /** * 单例模式:饿汉式. 线程安全. * @ClassName: SingleBean * @author BlueLake * @date 20 ...

  10. Java关于反射

    反射的概念:JAVA反射机制是在运行状态中,对于任意一个实体类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java ...