setTimeout()和setInterval()的使用与清除

setTimeout()和setInterval()的使用与清除

1.使用与清除

setTimeout()和setInterval()都可以用以下方式创建和清除。
（1）setInterval() 定时调用函数（每隔1s执行一次func1函数）

var timer = "";

timer = setInterval(func1,1000);//定时执行的函数无参数传递时的写法
// timer = setInterval("func2(1,2)",1000);//有参数传递时的写法：必须将函数用引号引起来，其中参数1,2也可以是变量，直接写变量名就好了

clearInterval(timer);//清除定时器

function func1() {
    console.log("我是无参函数");
}

function func2(a,b) {
    console.log("我是有参函数");
    console.log(a+b);
}

（2）setTimeout() 到指定时间后调用函数

var timer = "";

timer = setTimeout(func1,1000);//1s后执行func函数
// timer = setTimeout("func2(1,2)",1000);
clearInterval(timer);//清除定时器

2.注意（说明：以下为转载内容）

（1）如果定时时间t传的是0，则setTimeout函数会被放到循环结束之后才执行。
起因源于一道前端笔试题：

var fuc = [1,2,3];
for(var i in fuc){
  setTimeout(function(){console.log(fuc[i])},0);
  console.log(fuc[i]);
}

问：控制台会如何打印？
chrome打印结果如下：

解释如下：

虽然setTimeout函数在每次循环的开始就调用了，但是却被放到循环结束才执行，循环结束，i=3,接连打印了3次3。

这里涉及到 javascript单线程执行 的问题：javascript在浏览器中是单线程执行的，必须在 完成当前任务后才执行队列中的下一个任务。

另外，对于javascript还维护着一个 setTimeout队列，未执行的setTimeout任务就按出现的顺序放到setTimeout队列，等待普通的任务队列中的任务执行完才开始按 顺序执行 积累在setTimeout中的任务。

所以在这个问题里，会先打印1 2 3，而将setTimeout任务放到setTimeout任务队列，等循环中的打印任务执行完了，才开始执行setTimeout队列中的函数，所以在最后会接着打印3次3。

由此，可以知道虽然设置为0秒后执行任务，实际上是大于0秒才执行的。可是这有什么用呢？

用处就在于我们可以改变任务的执行顺序！因为浏览器会在执行完当前任务队列中的任务，再执行setTimeout队列中积累的的任务。

通过设置任务在延迟到0s后执行，就能改变任务执行的先后顺序，延迟该任务发生，使之异步执行。

（2）最好是用完就清除定时器，否则会消耗内存。