JavaScript 一个设定的时间间隔之后来执行代码，称之为计时事件。
 
主要通过两个方法来实现：
    1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    2.setTimeout() - 暂停指定的毫秒数后执行指定的代码
    并且，这两个方法都是window对象的方法。
 
一、setInterval()方法
    该方法值得是间隔一定的毫秒数不停的执行指定的代码。
    语法：window.setInterval(”js代码，函数等“，毫秒数);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计时器-setInterval</title>
	</head>
	<body>
		<form>
			<input type="button" value="开始计数" onclick="start()" />
			<input type="button" value="停止计数" onclick="stop()" />
		</form>
		<div id="div2"></div>
		<script type="text/javascript">
			var a=0;
			var timer = null;
			function start(){
				timer = setInterval(function(){
					a ++;
					document.getElementById("div2").innerHTML = "计数："+a;
				},1000);
			}
			function stop(){
				clearInterval(timer);
			}
		</script>
	</body>
</html>

二、setTimeout()方法
    指的是指定的毫秒数后执行指定的代码或方法。
    语法：window.setTimeout("javascript 函数",毫秒数);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计时器-setTimeout</title>
	</head>
	<body>
		<form>
			<input type="button" value="三秒后执行" onclick="count()" /><br /><br />
		</form>
		<div id="div1"></div>
		<hr />
		<form>
			<input type="button" value="开始计数" onclick="start()" />
			<input type="button" value="停止计数" onclick="stop()" /><br /><br />
		</form>
		<div id="div2"></div>
		<script type="text/javascript">
			function count(){
				//setTimeout("alert('时间到了')",3000);
				setTimeout(function(){
					hide();
				},3000);
			}
			function hide(){
				var div1 = document.getElementById('div1');
				div1.innerHTML = "hello world";
				div1.style.height = div1.offsetHeight+200+"px";
				div1.style.background = "red";
			}
			var a=0;
			var timer = null;
			function start(){
				a += 1;
				document.getElementById("div2").innerHTML = "计数："+a;
				timer = setTimeout("start();",1000);
			}
			function stop(){
				clearTimeout(timer);
			}
		</script>
	</body>
</html>

最后再强调：

setTimeout        在某个时间以后执行一个函数（只执行1次）
setInterval        让程序每个一定时间来调用函数1次

js-计时事件的更多相关文章

  1. js计时事件

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

  2. js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

  3. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  4. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  5. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  6. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  7. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  8. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  9. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  10. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

随机推荐

  1. APK重签名总结

    keytool -genkey -alias aeo_android.keystore -keyalg RSA -validity 20000 -keystore aeo_android.keysto ...

  2. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  3. Scala 深入浅出实战经典 第44讲： scala中view bounds代码实例

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  4. mysql设置连接超时时间参数：wait_timeout

    [root@ ~]# mysql -h 192.168.0.* -uroot -pEnter password: Welcome to the MySQL monitor. Commands end ...

  5. 聊聊CSS postproccessors

      阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors. 从Rework说起 Rework是TJ大神开发的CSS预处理框架.但为什么会出 ...

  6. 小试ijkplayer编译

    同步发表于 http://avenwu.net/ijkplayer/2015/05/07/hands_on_ijkplayer_preparation 谈到视频播放大家都知道ffmpeg,基于其的衍生 ...

  7. winform c#绑定combobox下拉框 年度代码。

    winform c#绑定combobox下拉框 年度代码. comboBox1.Items.AddRange("});//邦定数据 comboBox1.Text = DateTime.Now ...

  8. Java中RSA非对称密钥加解密使用示例

    一.简介: RSA加密算法是最常用的非对称加密算法,CFCA在证书服务中离不了它.RSA是第一个比较完善的公开密钥算法,它既能用于加密,也能用于数字签名.这个算法经受住了多年深入的密码分析,虽然密码分 ...

  9. GitHub使用简单记录

    根据<GotGitHub>[1]所做的一些整理 1. 浏览托管项目 在GitHub的页面中可以使用键盘快捷键 (1)按下问号(?)会在弹出窗口显示当前页面可用的快捷键. (2)在项目的代码 ...

  10. saiku执行速度慢

    使用saiku的过程中发现一个重要问题,速度慢!下面是跟踪和优化过程 一.首先抓包,发现ajax请求:http://l-tdata2.tkt.cn6.qunar.com:8080/saiku/rest ...