JavaScript中的计时器

开发工具与关键技术：html+js
作者： 李伙
撰写时间： 2019年2月13日

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型有两种，分别为：
(1)一次性计时器setTimeout()：指仅在指定的延迟时间之后触发一次。clearTimeout()方法可取消setTimeout()设置的计算器。
效果如下：

    var btnHello=document.getElementById('btnHello');
	btnHello.onclick=function(){
		sayHello();
	};
	function sayHello(){
		var timerTimeout=setTimeout("alert('hello! everyone')",1000);
	}

上图所示可以看出：点击按钮间隔1s后才执行。
(2)间隔性触发计时器setInterval()：指每隔一定的时间间隔就触发一次。clearInterval()方法可取消由 setInterval() 设置的计时器。
效果如下：

    var num=0,timerInterval=null;
	var tranfor=false;
	var start=document.getElementById('start');
	var stop=document.getElementById('stop');
	start.onclick=function(){
		if(tranfor){
			return ;
		}
		timerInterval=setInterval(starts,100);
	};
	stop.onclick=function(){
		clearInterval(timerInterval);
		tranfor=false;
	};
	function starts(){
		tranfor=true;
		document.getElementById('count').value=num;
		num++;
	}

上图所示可以看出：点击“开始计数”就会每间隔100毫秒从0开始自加，点击“停止计数”就会清除由 setInterval() 设置的计时器。