setTimeout函数的神奇用法

[前面写的废话]

大三开始实习就没写过博客了。虽然学到了很多，但如果不总结分享学到的东西，很容易忘记，如果不分享，也不会手动键入代码，所以对知识的理解不够透彻。

毕业半年多了，最近学了《JavaScript高级程序设计》这本书，受益匪浅。看完之后才意识到，虽然写了这么多JS，但是对JS的理解最多也只是中下水平。

现在看第二遍，一边读代码一边打字，一边分享，希望你能从读这篇文章中有所收获。

[这是正文]

在这本书《JavaScript高级程序设计》中，介绍了setTimeout函数的许多神奇用途。今天，第一个——使用setTimeout而不是setInterval进行间歇呼叫。

这就是书上说的

“在开发环境中，很少使用setInterval，因为后一个间歇调用很可能在前一个间歇调用结束之前开始”。

你怎么理解这个？

首先，我们来看看setInterval函数的一般用法，以及如何使用setTimeout代替setInterval

var execute times=0；var intervalTime=500var intervalId=null//发布以下评论，运行setInterval的demo interval=setInterval(interval fun，interval time)；//发布以下评论，运行setTimeout//settimeout的演示(超时乐趣，间隔时间)；函数interval fun(){ execute times；console . log(' dointervalfun —— ' execute times)；if(execute times==5){ clearInterval(intervalId)；}}函数timeoutoun(){ execute times；console . log(' dotimeoutunn —— ' execute times)；if(ExecuteTimes 5){ SetTiME out(arguments . calleeper，interval time)；}}代码相对简单。我们只是在setTimeout的方法中再次调用setTimeout，可以达到间歇调用的目的。

重点是。为什么作者建议我们用setTimeout代替setInterval？setTimeout间歇呼叫和传统的setInterval间歇呼叫有什么区别？

不同的是，setInterval的interval调用在执行前一个方法之前开始计时。例如，如果间隔时间为500ms，后一种方法将被放入执行序列，而不管前一种方法当时是否已经执行。这时，就会出现问题。如果前一种方法的执行时间超过500ms，加入时间为1000ms，则意味着后一种方法将在前一种方法执行后立即执行，因为此时间歇时间已经超过500ms。

书中没有代码证明这个结论，所以我写了一段代码来验证。

var execute times=0；var intervalTime=500var intervalId=null可变时间=新日期()。getTime()；//发布以下评论，运行setInterval的demo interval=setInterval(interval fun，interval time)；//发布以下评论，运行setTimeout//settimeout的演示(超时乐趣，间隔时间)；函数interval fun(){ execute times；var now execute times=execute times；var timeDiff=新日期()。getTime()-oriTime；console . log(' dointervalfun —— ' noexecutetimes '，在' timeDiff 'ms '之后)；var DelayParam=0；睡眠(1000)；console . log(' dointervalfun —— ' noexecute times ' finish！');if(execute times==5){ clearInterval(intervalId)；}}函数timeoutoun(){ execute times；var now execute times=execute times；var timeDiff=新日期()。getTime()-oriTime；console . log(' dotimeoutunn —— ' noexecutetimes '，在' timeDiff 'ms '之后)；var DelayParam=0；睡眠(1000)；console . log(' dotimeoutunn —— ' noexecute times ' finish！');if(ExecuteTimes 5){ SetTiME out(arguments . calleeper，interval time)；}}函数睡眠(sleepTime){var start=new Date()。getTime()；while(true){if(new Date()。getTime()-startsleep time){ break；}}}(这里用Daniel提供的sleep函数来模拟函数的运行时间)

执行setInterval的演示方法，查看控制台

可以发现fun2和fun1之间的间歇期接近1000ms，正好是fun1的执行时间，也就是说fun2在fun1执行完之后马上执行，这和我们间歇期调用的初衷是背道而驰的。

我们注释setInterval的演示方法，放开setTimeout的演示方法，运行并查看控制台

最后是正常的。fun1和fun2的区别是1500ms=1000 500，fun2在fun1执行500ms后执行。

我不知道你有没有我这么豁达，但是我感觉我的视野开阔了一点，setTimeout有很多很棒的用途。下次再说吧！