一.定义
关于JavaScript中的计时事件？
JavaScript 一个设定的时间间隔之后来执行代码，我们称之为计时事件（菜鸟说…）
二.方法
2.1计时器
setInterval() ：
是什么：这个方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。
怎么用：setInterval ( "函数" , "时间" ) 注：第二个参数间隔的毫秒数（1000毫秒=1秒）
2.2如何终止计时器
语法：clearInterval(计时器的id);
关于计时器的例子：
走马灯
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">onload = function() {// 找到id为p的元素var p = document.getElementById("p");btn = "btn1"button = document.getElementById(btn).onclick = function() {// 加入计时器setInterval(function() {// 找到p标签内的文字var txt = p.innerHTML;// charAt() 方法返回字符串中指定索引（下标）处的字符。var end = txt.charAt(txt.length-1);// substr() 方法从指定位置开始，并返回指定数量的字符。并且不会更改原始字符串。var body = txt.substr(0,txt.length-1);// 更新p标签内的文字p.innerHTML = end + body;}, 200);// alert(1)}}</script></head><body><p id="p">欢迎来到低配版走马灯的循环内</p><input type="button" name="name" value="<-" id="btn1" /></body>
</html>时间显示：
第一种方式（不终止计时器）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">onload = function() {// 下面是显示当前时间的一种写法window.date.innerHTML = new Date().toLocaleString();// 这是一个回调函数var isRun = true// 使用计时器var intervalId = setInterval(function() {if (isRun) {window.date.innerHTML = new Date().toLocaleString();}}, 1000) // 每秒循环一次计时器内的内容document.getElementById("btn").onclick = function() {/*// 回车在这里起作用if (this.value == "点击停止") {// 回看上面的代码，把isRun改成false，让他进不去计时器isRun = !isRun;// 改变按钮的文字this.value = "点击开始"} else {isRun = !isRun;this.value = "点击停止"}*/// 上述的简易写法（可以使用上面的写法，比较清晰明了一点）isRun = !isRun;this.value = "点击" + "开始,停止".split(",")[Number(isRun)];}}</script></head><body><p>现在时刻：<span id="date"></span></p><br /><input type="button" id="btn" value="点击停止" /></body>
</html>第二种方式（终止计时器）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 页面一开始加载就显示时间，然后每隔一秒钟更新一次时间 onload = function() {// toLocaleString(),toLocaleDateString(),toLocaleTimeString()等// 如果不加这句话,一开始可能会显示不出来,会等一秒才显示window.date.innerHTML = new Date().toLocaleString();// 这是一个回调函数var intervalId = setInterval(function() {window.date.innerHTML = new Date().toLocaleString();}, 1000)document.getElementById("btn").onclick = function() {if (this.value == "点击停止") {// 要变成开始// 直接清除计时器clearInterval(intervalId);this.value = "点击开始"} else {// 要变成停止intervalId = setInterval(function() {window.date.innerHTML = new Date().toLocaleString();}, 1000)this.value = "点击停止"}}}</script></head><body><p>现在时刻：<span id="date"></span></p><br /><input type="button" id="btn" value="点击停止" /></body>
</html>但是对于第二种方法来说，每点一次就清除一次计时器太麻烦，系统本身效率不高
关于时间显示运行代码如图：
2.3延时器
setTimeout() ：
是什么：是一种在定时器运行完毕后执行一段代码的方法。
怎么用：setTimeout ( "函数" , "时间" ) 注：时间的单位同样是毫秒
解释：就像浏览器搜索，不是你输入一个就返回相应的东西，而是再你输入后等一会看你还会不会继续输入，如果不输入了就返回相对应的结果
2.4如何清空延时
语法：clearTimeout(延时器的id);
为什么要清空延时：
如果按的快的话，要防止延时累加，把之前的延时清空。
就像下面这样：
关于延时器的例子
在下面输入框内输入东西，会延迟回显到第一个框中
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">input {width: 50%;}</style><script type="text/javascript">onload = function() {var txt1 = document.getElementById("txt1");var txt2 = document.getElementById("txt2");var timeoutId;// 键盘弹起之后,不用onkeydown是因为防止用户一直按着键盘txt2.onkeyup = function() {// 关闭延时clearTimeout(timeoutId); // 如果已经关闭或没有数据，这句话无效// 开启新的延时timeoutId = setTimeout(function() {txt1.value = txt2.value;},500)}}</script></head><body><input type="text" name="name" value="" id="txt1"/><br /><br /><input type="text" name="name" value="" id="txt2"/></body>
</html>
