JS setTimeout方法初探

作者 : 开心源码 本文共2061个字,预计阅读时间需要6分钟 发布时间: 2022-05-11 共71人阅读

今天写代码的过程中偶然发现了javascript中setTimeout()方法的神秘之处,于是开始进行研究。研究了两个小时,写了个小demo进行了测试,终于有一点自己的了解了,于是和大家进行分享。

setTimeout方法详情

首先在W3School上为setTimeout给出了如下解释:setTimeout() 方法使用于在指定的毫秒数后调使用函数或者计算表达式。

使用法:setTimeout(code,millisec)

其中第一个参数定义一串代码,能是方法名,也能是定义的一个function,第二个参数值指定一个毫秒数,规定在多少毫秒后执行第一个参数定义的方法(ps:尽管在这里规定了多少时间之后执行代码但是偶尔在程序比较复杂或者者遇到执行时间比较长的代码时,程序并不肯定按照这个时间后去执行代码,这就是线程阻塞问题)。

javascript线程问题

在深入了解setTimeout之前必需先理解javascript的线程机制。JavaScript语言是单线程,也就是说,同一个时间只可以做一件事。那么,为什么JavaScript不可以有多个线程呢?这样可以提高效率啊。

JavaScript的单线程,与它的使用途有关。作为浏览器脚本语言,JavaScript的主要使用途是与使用户互动,以及操作DOM。这决定了它只可以是单线程,否则会带来很复杂的同步问题。比方,假定JavaScript同时有两个线程,一个线程在某个DOM节点上增加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

为了利使用多核CPU的计算可以力,HTML5提出Web worker标准,允许JavaScript脚本创立多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。

排队问题

单线程就意味着同一时间不可可以有两段代码同时在执行,那么javascript面对着那么多的代码和方法,该怎样执行呢?这时就会有一个任务队列,javascript将正在执行的任务后面的任务都会依次放入任务队列中,当前一个任务执行完成才会把它从任务中释放出来进行执行。

javascript中的异步

尽管javascript中的方法必需同步执行,但是javascript提供了两个方法能不按照书写顺序执行代码,即先将任务放入任务队列中,待条件满足时才会执行,这两个方法就是定时器setTimeout和setInterval。

setTimeout异步执行

setTimeout能指定多少秒后执行方法,这个值能是0也能是大于0的数值,但是无论这个参数值是多少,该方法中包含的代码块都会在所有的同步任务执行完成后才会执行,即就是写在所有代码的第一行,也还是会在同步任务一律完成才会执行setTimeout,所以万一后端响应时间比较长的情况时,setTimeout并不肯定可以在规定的时间后执行代码。

而且假如有多个setTimeout有时间为0的和时间大于0的那么不论他们在代码中的相对顺序是怎么的,都会优先执行setTimeout为0的代码块,其次才会在多少毫秒后执行其余setTimeout代码块。

这里我写了一个例子,我附上代码:

//setTimeout方法名,执行代码时可在控制台通过clearTimeout(timeSet)清理

var timeSet ;

setTime();

var a = [10,20,30,40,50];

for(var i=0;i

console.log(“for:”+i+” “+a[i]+”
“);

setTimeout(function(){

console.log(“setTimeout 2000 : “+i+” “+a[i]);

},2000);

setTimeout(function(){

console.log(“setTimeout 0 : “+i+” “+a[i]);

},0);

}

setTimeout(function(){

console.log(“for循环后面的setTimeout”);

},0);

(function(){

console.log(“我是setTimeout后面的函数1”);

}());

(function(){

console.log(“我是setTimeout后面的函数2”);

}());

function setTime(){

var _date = new Date();

var hh = _date.getHours();

var mm = (_date.getMinutes()<10?"0":"")+_date.getMinutes();

var ss = (_date.getSeconds()<10?"0":"")+_date.getSeconds();

var time = hh+”:”+mm+”:”+ss;

console.log(time);

timeSet = setTimeout(setTime,1000);

}

JS setTimeout方法初探

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS setTimeout方法初探

发表回复