settimeout需要清除吗_第37节 计时器setTimeout和setInterval

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

计时器：

Javascript是单线程语言，但它允许通过设置超时和间歇时间值来调度代码在特定的时刻执行；其是通过setTimeout()和setInterval()两个window对象的全局函数实现的，用来注册在指定的时间之后单次或重复调用的函数；

setTimeout()：

延迟代码执行(也叫超时调用)：用来实现一段代码在指定的毫秒之后运行；

语法：window.setTimeout(code,delay)，code要执行的代码，可以是一个包含Javascript的代码字符串，也可以是一个函数，delay等待的毫秒数；

// 不建议传递字符串setTimeout("alert('zeronetwork')",3000);// 推荐的使用方式setTimeout(function(){    alert('zeronetwork');},3000);// 推荐的使用方式setTimeout(show,3000);function show(){    alert('zeronetwork');}

因为历史原因，第一个参数可以传递字符串，但有可能导致性能损失，因为这个字符串会在指定的超时时间之后进行求值，相当于执行eval()，因此不推荐使用字符串的形式；

// 能达到无限循环的目的var n = 0;function fun(){    n++;    console.log(n);    setTimeout(fun, 1000);}fun();  // 直接执行setTimeout(fun,3000);

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码并不一定会执行；Javascript是一个单线程的解释器，因此一定时间内只能执行一段代码；为了控制要执行的代码，就有一个Javascript任务队列，这些任务会执照将它们添加到队列的顺序执行；这个参数实际上是告诉Javascript再过多长时间把当前任务添加到队列中，如果队列是空的，那么添加的代码会立即执行，如果队列不是空的，那么它就要等前面的代码执行完毕后再执行；

另外，如果该参数为0，也并不一定会立即执行，因为也需要将它放到队列中，等待前面的任务全部执行完后，才会“立即”执行；

setTimeout()方法会返回一个数字ID，ID本质上是要延迟进程的ID，是计划执行代码的唯一标识符；可以使用clearTimeout()方法，调用此ID，达到取消超时调用的目的；

var timeoutid = setTimeout(function(){    alert("zeronetwork");},3000);console.log(timeoutid);clearTimeout(timeoutid);

只要是在指定的时间尚未过去之前调用clearTimeout()，就可以完全取消超时调用；

time

示例：可以利用 clearTimeout() 方法在特定条件下清除延迟处理代码。例如，当鼠标指针移过某个元素，停留半秒钟之后才会弹出提示信息，一旦鼠标指针移出当前元素，就立即清除前面定义的延迟处理函数，避免干扰；

零点网络

零点教育是从事IT教育

主讲：零点网络

除前两个参数之外，HTML5规范还允许setTimeout()传入额外的参数，并在调用函数时把这些参数传递过去；

setTimeout(function(str,age){    alert(str + "age:" + age);},3000,"wangwei",18);

时间间隔setInterval()：

代码延迟执行机制在执行一次后就失效，而在应用中，有时希望某个程序能反复执行，比如说倒计时等，需要每秒执行一次；为此可以使用window方法的setInterval方法，其会按照指定的时间间隔重复执行代码，直到取消或页面被卸载；其与setTimeout()类似，参数也一致；

// 不建议使用字符串setInterval("console.log('zero')", 3000);// 推荐的方式setInterval(function(){    console.log('zero');},3000); function timer(){    var d = new Date();    document.getElementById("result").innerText = d.toLocaleTimeString();}setInterval(timer,1000); // 输出的时间并不精确，并不是整1000毫秒var firstTime = new Date().getTime();setInterval(function(){    var lastTime = new Date().getTime();    console.log(lastTime - firstTime);    // alert("ok");  // 会暂停    firstTime = lastTime;},1000);同setTimeout()一样，setInterval()也支持第三个参数；

取消间隔性执行代码：

使用setInterval()方法同样会返回一个间隔调用ID，该ID可用于在将来某个时间取消间隔调用；可以使用clearInterval方法移除间隔调用，其接收一个计时器ID作为参数；

// 如果不使用它的返回值，可以直接使用数字1、2...var i = 0;setInterval(function(){    console.log(i++);    if(i>10)        clearInterval(1);},1000);

取消间隔调用的重要性要远远高于取消超时调用，因为在不取消的情况下，间隔调用将会一直执行到页面卸载；

var num = 0, max = 10;var intervalId = null;function incNum(){    num++;    console.log(num);    // 如果执行次数达到了max设定的值，则取消后续的调用    if(num == max){        clearInterval(intervalId);        alert("结束");    }}intervalId = setInterval(incNum, 1000); // 另外var mInput = document.getElementsByTagName('input')[0];var sInput = document.getElementsByTagName('input')[1];var m = 4,s = 52;var timer = setInterval(function(){    s++;    if(s == 60){        s = 0;        m++;    }    sInput.value = s;    mInput.value = m;    if(m == 5)        clearInterval(timer); },1000);

setTimeout()与setInterval()同时使用时，其返回的id也会按顺序返回；

在某些时候 setTimeout()与 setInterval() 可以实现同样的效果；

var num = 0, max = 10;function incNum(){    num++;    console.log(num);    // 如果执行次数达到了max设定的值，则取消后续的调用    if(num 

在使用超时调用时，没有必要使用超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自动停止；

一般认为，使用延迟代码来模拟时间间隔是一种最佳方式；在开发环境中，很少使用时间间隔，因为时间间隔可能会在前一个间隔调用结束之前启动，而延迟代码完全可以避免这一点；

Web前端开发之JavaScript-零点程序员-王唯