JavaScript计时事件

JavaScript计时事件
JavaScript一个设定的事件间隔之后，执行代码，我们称之为计时事件

通过使用JavaScript，我们可以做到在一个设定的时间间隔之后再执行代码，而不是函数被调用后立即执行我们称之为计时事件

在JavaScript中使用计时事件是很容易的，两个关键方法是：

·setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
·setTimeout() - 暂停指定的毫秒数后执行指定的代码
Note：setInterval()和setTimeout()是HTML DOM Window对象的两个方法

下面分别讲一个两个方法
1、setInterval()方法
   setInterval()间隔制定的毫秒数不停的执行指定的代码
   语法：window.setInterval(“javascript function”,milliseconds);
	
   window.setInterval()方法可以不使用window前缀，直接使用函数setInterval().
   setInterval()第一个参数是函数(function)。
   第二个参数是间隔的毫秒数
   注意：1000毫秒是一秒

   实例：每三秒弹出”hello”
	 <p>单击按钮每3秒出现一个“Hello”警告框。</p>
	 <p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
	 <button onclick="myFunction()">点我</button>
	 <script>

function myFunction(){
setInterval(function(){alert(“Hello”)},3000);
}

这样的话对用户体验不好，下面再来一个实例，将显示当前时间，用setInterval()方法设置每秒钟执行一次代码，就是手表一样。

在页面显示一个时钟

如果停止运行？
clearInterval()方法用于停止setInterval()方法执行的函数代码。
语法：window.clearInterval(intervalVariable)

Window.clearInterval()方法可以不使用window前缀，直接使用函数clearInterval().
要使用clearIterval()方法。在创建计时方法时你必须使用全局变量：
myVar=setInterval(“javascript function”,milliseconds)；

然后你可以使用clearInterval()方法来停止执行。
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
    var myVar = setInterval(function () { myTimer() }, 1000);
    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("demo").innerHTML = t;
    }
    function myStopFunction() {
        clearInterval(myVar);
    }
    </script>

2、setTimeout()方法
语法：window.setTimerout(“javascript 函数”,毫秒数);

setTimeout()方法会返回某个值，在上面的语句中，值被储存在名为t的变量中，假如你希望取消这个setTimeout()，你可以使用这个变量名来指定它。
setTimeout()的第一个参数是函数是含有JavaScript语句的字符串，这个语句可能植入”alert(5 seconds!)”,或者对函数的调用，诸如alertMsg()。
第二个参数从当前期多少毫秒后执行第一个参数。
还是上面的实例
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction() {
        setTimeout(function () { alert("Hello") }, 3000); 
    }

停止方法

点击第一个按钮等待3秒后出现"Hello"弹框。

点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。

点我 停止弹框