JS setTimeout方法初探

  • 时间:2018-06-06 01:54 作者:Inn程序媛 来源:Inn程序媛 阅读:143
  • 扫一扫,手机访问
摘要:今天写代码的过程中偶然发现了javascript中setTimeout()方法的神秘之处,于是开始进行研究。研究了两个小时,写了个小demo进行了测试,终于有一点自己的了解了,于是和大家进行分享。setTimeout方法详情首先在W3School上为setTimeout给出了如下解释:setTime

今天写代码的过程中偶然发现了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方法初探

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部