当前位置:首页 > 日记 > 正文

setTimeout函数的神奇使用

setTimeout函数的神奇使用

【写在前面的胡言乱语】

  自从大三开始实习之后,就没有写博客了,虽然学了很多东西,但是如果没有进行总结和分享,学的东西就很容易忘记,而且不进行分享,就不会手动去敲代码,这样对知识的理解就不够透彻。

现在毕业半年多了,最近学习了《JavaScript高级程序设计》这本书,受益匪浅,看了才知道虽然自己写了那么多JS,但是对JS的理解最多就只是中下水平。

现在看第二遍,边看边敲代码,边分享,希望看到这篇文章的你,能有所收获。

【这是正文】

  《JavaScript高级程序设计》这本书里面,介绍了很多关于setTimeout函数的神奇使用,今天来介绍下第一个——使用setTimeout代替setInterval进行间歇调用。

  书中是这么说的

“在开发环境下,很少使用间歇调用(setInterval),原因是后一个间歇调用很可能在前一个间歇调用结束前启动”。

  这话怎么理解呢?

  首先我们来看一下一般情况下的setInterval函数的使用,以及如何使用setTimeout代替setInterval

var executeTimes = 0;var intervalTime = 500;var intervalId = null; // 放开下面的注释运行setInterval的DemointervalId = setInterval(intervalFun,intervalTime);// 放开下面的注释运行setTimeout的Demo// setTimeout(timeOutFun,intervalTime); function intervalFun(){executeTimes++;console.log("doIntervalFun——"+executeTimes);if(executeTimes==5){clearInterval(intervalId);}} function timeOutFun(){executeTimes++;console.log("doTimeOutFun——"+executeTimes);if(executeTimes<5){setTimeout(arguments.callee,intervalTime);}}

  代码比较简单,我们只是在setTimeout的方法里面又调用了一次setTimeout,就可以达到间歇调用的目的。

  重点来了,为什么作者建议我们使用setTimeout代替setInterval呢?setTimeout式的间歇调用和传统的setInterval间歇调用有什么区别呢?

  区别在于,setInterval间歇调用,是在前一个方法执行前,就开始计时,比如间歇时间是500ms,那么不管那时候前一个方法是否已经执行完毕,都会把后一个方法放入执行的序列中。这时候就会发生一个问题,假如前一个方法的执行时间超过500ms,加入是1000ms,那么就意味着,前一个方法执行结束后,后一个方法马上就会执行,因为此时间歇时间已经超过500ms了。

  书中没有给出代码证明这个结论,于是自己写了一段代码来验证。

var executeTimes = 0;var intervalTime = 500;var intervalId = null;var oriTime = new Date().getTime(); // 放开下面的注释运行setInterval的DemointervalId = setInterval(intervalFun,intervalTime);// 放开下面的注释运行setTimeout的Demo// setTimeout(timeOutFun,intervalTime); function intervalFun(){executeTimes++;var nowExecuteTimes = executeTimes;var timeDiff = new Date().getTime() - oriTime;console.log("doIntervalFun——"+nowExecuteTimes+", after " + timeDiff + "ms");var delayParam = 0;sleep(1000);console.log("doIntervalFun——"+nowExecuteTimes+" finish !");if(executeTimes==5){clearInterval(intervalId);}} function timeOutFun(){executeTimes++;var nowExecuteTimes = executeTimes;var timeDiff = new Date().getTime() - oriTime;console.log("doTimeOutFun——"+nowExecuteTimes+", after " + timeDiff + "ms");var delayParam = 0;sleep(1000);console.log("doTimeOutFun——"+nowExecuteTimes+" finish !");if(executeTimes<5){setTimeout(arguments.callee,intervalTime);}} function sleep(sleepTime){var start=new Date().getTime();while(true){  if(new Date().getTime()-start>sleepTime){  break;}}}

  (这里使用大牛提供的sleep函数来模拟函数运行的时间)

  执行setInterval的Demo方法,看控制台

  可以发现,fun2和fun1开始的间歇接近1000ms,刚好就是fun1的执行时间,也就意味着fun1执行完后fun2马上就执行了,和我们间歇调用的初衷背道而驰。

  我们注释掉setInterval的Demo方法,放开setTimeout的Demo方法,运行,查看控制台

  这下终于正常了,fun1和fun2相差了1500ms = 1000 + 500,fun2在fun1执行完的500ms后执行。

  不知道你有没有和我一样脑洞大开,反正我是感觉视野又开阔了一点,setTimeout的妙用还有很多,下次接着聊!

相关文章

Node学习记录之cluster模块

Node学习记录之cluster模块

模块,学习,电脑软件,Node,cluster,在如今机器的CPU都是多核的背景下,Node的单线程设计已经没法更充分的"压榨"机器性能了。所以从v0.8开始,Node新增了一个内置模块——“cluster”,故名思议,它可以通过一个父进程管理一坨子进程的方式来实现…

自定义事件解决重复请求BUG的问题

自定义事件解决重复请求BUG的问题

请求,自定义事件,电脑软件,BUG,现在,组件化开发还是比较流行的,毕竟其优点相当突出。最近在开发一个组件的时候,遇到了一个很有意思的BUG。。。BUG的背景最近在开发一个组件,好不容易开发好了转测试。然后,测试给我提了一个这样的bug,orz...因为…

微信小程序异步处理详解

微信小程序异步处理详解

异步处理,详解,程序,电脑软件,微信小,本文实例为大家分享了微信小程序异步处理的具体方法,供大家参考,具体内容如下直接看问题:然后看打印的结果:根据上面两图可以看出,代码上先执行的网络请求,再执行打印的变量,但是从下面打印的结果来看,先出结果…

解决ASP.NET Core Mvc文件上传限制

解决ASP.NET Core Mvc文件上传限制

文件上传,实例,电脑软件,NET,ASP,一、简介在ASP.NET Core MVC中,文件上传的最大上传文件默认为20MB,如果我们想上传一些比较大的文件,就不知道怎么去设置了,没有了Web.Config我们应该如何下手呢?二、设置上传文件大小1.应用程序级别设置我们需…

JS之if语句对接事件动作逻辑 | 详

JS之if语句对接事件动作逻辑 | 详

语句,事件,详解,逻辑,动作,if 函数的实现步骤:function +名字()指定id , 指定开关(display: none or block)if + else 构成逻辑 控制开关决定在哪里安置一个灯泡, 指定一个id给某个标签把开关用电线连着灯泡, 安装开关#+id名称{ 属性1= 赋值…

浅谈jquery中ajax跨域提交的时候会

浅谈jquery中ajax跨域提交的时候会

提交,请求,跨域,会有,浅谈,我们平时在同域中请求页面什么的时候不会有这种情况,这种情况大多发生在移动端的跨域请求中发生的。解决方法就是在服务端中加一层过滤HTTP请求的类型,把OPTION等不用的类型过滤掉。就是当请求为非HTTP中的 GET 和 …

JS库 Highlightjs 添加代码行号的

JS库 Highlightjs 添加代码行号的

行号,代码,电脑软件,JS,Highlightjs,Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。然而,Highlightjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现…

painter怎么使用钢笔画笔绘制图形?

painter怎么使用钢笔画笔绘制图形?

绘制图形,电脑软件,painter,Painter绘制图形很简单,是一款很常用的绘图软件,今天我们就来看看painter中钢笔画笔的使用方法,请看下文详细介绍软件名称:Corel Painter(绘画软件) 2018 官方正式版(附注册机) 在线安装包 64位软件大小:994KB更新时…

excel表格斜杠绘制教程

excel表格斜杠绘制教程

绘制,教程,斜杠,表格,电脑软件,  Excel表格中如何绘制斜杠呢?下面是由小编分享的excel表格斜杠绘制教程,以供大家阅读和学习。excel表格斜杠绘制教程:  绘制斜杠步骤1:有时候,做表格需要给第一个格加斜杠,如下,绘制斜杠步骤2:选中要加斜杠的单…

Bootstrap栅格系统使用方法及页面

Bootstrap栅格系统使用方法及页面

变形,栅格系统,调整,解决方法,使用方法,如果你以前使用过Bootstrap2或者了解过响应式技术,那么肯定对Bootstrap栅格系统并不陌生,由于栅格系统的引入,使得Bootstrap的跨设备布局显示变得可能。什么是栅格系统栅格系统是指,将页面布局划分为等宽…

手机wps的ppt背景怎么编辑

手机wps的ppt背景怎么编辑

模板,方法,幻灯片,背景,编辑,  wps幻灯片的制作,怎么用手机去制作ppt呢?其实手机添加幻灯片模板和制作方法都很简单,关键是多学,下面给大家分享使用手机wps编辑幻灯片模板的方法,欢迎大家来到学习。手机wps添加幻灯片模板的方法wps添加幻灯片…

ps怎么制作一个膨胀文字的动画效果

ps怎么制作一个膨胀文字的动画效果

膨胀,动画效果,文字,电脑软件,ps,ps想要制作一段文字变形的动画,该怎么制作呢?下面我们就来看看ps制作文字膨胀效果的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先启动Photoshop cs5,执行…