2020/1/27 在setInterval中使用setTimeout时遇到的问题

这几天在做一个简单的随机抽取姓名的一个抽人的小页面

顺顺利利的

今天回来再打开看自己作死一样的一直找看看有没有什么bug

没想到真的找到一个

花了一个多小时才解决

其实最后才觉得是个比较细节的问题

是关于setInterval和setTimeout的

这是修改前：

是一个点击事件内的代码

当我点击时，出现了这样的效果：

也就是说，每一个打印他都执行了6次；

其实这样说也不恰当，准确来说应该是内层的setTimeout函数执行了6次，为什么呢？

我一开始以为是同步异步的问题

但是毫无疑问，他们是异步执行这个因素我早已考虑在内，不然我怎么会用setTimeout来延迟呢

所以我百思不得其解

如图：

这就是点击事件

因为出现的bug是，即使我设置了ifStart这个变量作为能否点击的标杆，当我鼠标连点时，还是会多次出现这样的打印结果：

也就是说

这句代码被重复执行了，也也也就是说点击事件生效了，那我标杆干嘛去了，点一次就直接失效了，必须等

这行代码执行了才可以再点啊

当然这是理想情况，如果确实如此那还有个屁的bug

总结打印的结果我发现的问题所在

就是内层延迟函数即outid = setTimeout的延迟时间为250ms，而包裹它的setInterval间隔时间缺只有50ms

也就是说在第一个setTimeout执行时，setInterval已经重复了250/50+1次，即我们看到的6次，定义了6次outid = setTimeout

既然看清楚了问题所在，那么问题就好解决了

只需更改这两处就行了，令var outid = setTimeout只执行一次就可以了

再看打印结果：

成功！

这样ifStart就不会被连续赋值为true导致点击事件连点时在这个时间段内生效。