setTimeout和setInterval不容易注意到的一些细节

今天没事翻了翻JS高程,看到了setTimeout部分有这么一句话:调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。

然后我从书中上下左右找了半天也没发现有说这个ID的地方,于是乎抱着钻牛角尖的心态我去试了试,发现了一些很有意思的东西。

var id1 =setTimeout(function(){},10);
var id2 =setTimeout(function(){},10);
console.log(id1); //1
console.log(id2); //2
这个不是重点,重点是我又试了一下setInterval():
var id3 =setInterval(function(){},10);
console.log(id3); //3
也就是说这两个函数的id值是顺次创建的,一般情况下我们想要清除一个setTimeout()需要这么做:
clearTimeout(id1);
于是我想既然我们知道了它的id值是不是可以直接去清除呢?我就试了一下:
clearTimeout(1);
OK,成功了,完全没有问题!接着我又想既然他俩的id值都是数字能不能混着清除?然后又试了一下:
clearTimeout(id3);
还是成功了!这俩居然能够混用,我也是醉了。好吧,这个真是神奇,有必要记下来。

接下来再说说这setTImeout()别的方面的一些特点吧。

setTimeout()这个函数的第二个值是一个毫秒数,不能设置成0,或者说设置成0也没啥用,因为H5里面规定了它的最小值是4,也就是说小于4的人家会给你自动加上。

假设可以是0的话下面这个结果也永远是1,3,2:
console.log(1);
setTimeout(function(){console.log(2)},0);
console.log(3);
为什么呢?这就要说到JS语言的特性上了,JS这门语言创作的目的就是为了高效、简单、快捷,所以创作初始就将它定成了一门单线程的语言,但是如果真是单线程的话又会出现很多的问题,比如说事件堵塞,每一个任务执行完了才能去执行下一个任务。打个比方:你朋友中午要来你家吃饭,你决定要给他做几个菜,其中有一道糖醋鱼,会做饭的人都知道做鱼要提前把鱼用调料腌上半天鱼肉才能入味,你早上把鱼腌上了,然后你就在旁边等这个鱼腌好,等了一上午鱼终于腌好了你才发现没有买别的菜,朋友这时候来你家做客你一道菜也没有做好,尴尬了。这就类似于一个单线程的任务,一个执行完了才能执行另一个,其中有大量的等待时间,造成了资源的浪费和任务的堵塞。JS为了解决这个问题引入了异步处理的方法,也就是说你腌了鱼直接扔一边接着去干别的事情,等别的事情弄好了再回来看看鱼腌好没。

Web Work中规定了JS可以拥有多线程,但是同一时间只能拥有一个主线程,除了主线程其他线程不允许任何的dom操作,也就是说其他的线程类似于辅助线程。主线程中有一个执行栈,栈中的任务如果是同步执行结束了就会释放掉,如果是异步则会执行后进入辅助线程的任务队列之中,执行栈中如果空了主线程就会重新查找任务队列中的任务来执行,这叫做任务轮询。而今天我们的主角setTimeout也是一个异步的操作,而且比较不受待见,只有执行栈和任务队列中的任务全部执行完了才会去执行它,也就是说后面这个时间就是一个虚的数字,并不是真正意义上的执行后延时,因此即使它是0,也会是最后执行。

吐槽一句写博客真是挺累的,打了没多久手都酸了,还是敲代码来的省事。最后再说说setTimeout这个函数的另一个用法吧,就是设定计时器:
//计时器
var num = 0;
var max = 10;
function setTime()
{
num++;
console.log(num);
if(num<max){
setTimeout(setTime,1000);
}else{
console.log("Done");
}
}
setTime();
因为setInterval会一直循环如果忘了清除的话有可能会给用户带来不小的困扰,因此做一个计时器来有限次的执行是有很有必要的,当然,setInterval也并不是一无是处,比如常见的轮播图就离不开它,好吧其实setTimeout也能实现它,本来想夸两句的结果又把它黑了。
原文地址:https://www.cnblogs.com/bing0117/p/5839577.html