前端面试知识点-JS定时器setTimeout和setInterval -【小咚 “面筋” 记】

---

前言

昨天事情太多了，导致没更新，回到宿舍都晚上11点了，宿舍11点断电。。。实验室项目和后端大佬对接了一晚上改了一堆bug，所以今天写两篇吧！算昨天的加上今天的，感觉博客有点拖欠了，不多说了，这次还是总结一下上次面试的问题，面试官问了我js定时器，我之前用过，但是没仔细深入了解过，所以今天总结一下吧！不至于下次面试再这么丢人了。。。

---

一、JS两个计时器方法

一个是延时定时器setTimeout，一个是间歇调用定时器setInterval；这两个计时器的主要区别在于一个（setTimeout）是在指定的毫秒数后调用函数或计算表达式，而另一个（setInterval）则是按照指定的周期（以毫秒计算）来调用函数或计算表达式，方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。setTimeout在计时结束前也可以通过clearTimeout()来终止其运行。

二、setTimeout

setTimeout(fun,time,lang);

参数	描述
fun	必填项，这里可以填写函数及其执行的代码。
time	必填项，在执行代码前需等待的毫秒数，单位是毫秒。
lang	可选参数。脚本语言可以是：JScript、VBScript、JavaScript

例子：

//定时触发器
var time = setTimeout(() => {
    console.log("我是一秒后触发的定时器！");
}, 1000);
console.log(time);

结果：

前面说过clearTimeout()可以打断定时器，这里实现一下，在原有的代码基础上添加如下代码：

setTimeout(() => {
    console.log("我在0.5s的时候打断了一秒的定时器");
    clearTimeout(time);
}, 500);

结果：

只要能获取到延时定时器的id，再把id作为参数传递给clearTimeout()即可，上面代码中time就是延时定时器的id，启动定时器的时候会返回其id，当然终止这个定时器触发函数一定是在计时结束前，如果终止时间大于函数触发时间，就没有效果了，上述代码延时1秒，在0.5秒的时候终止了1秒的定时器触发函数。

三、setInterval

setInterval(fun,time,lang);

参数	描述
fun	必填项，这里可以填写函数及其执行的代码。
time	必填项，周期性执行或调用 fun 之间的时间间隔，以毫秒计。
lang	可选参数。脚本语言可以是：JScript、VBScript、JavaScript

例子：

var t = 0;
//计时触发器
var inter = setInterval(() => {
    console.log(t++);
    if (t == 4) clearInterval(inter);
}, 1000);
console.log(inter);

结果：

setInterval函数就如前面所讲，间歇或周期的调用，然后达到某个条件后终止，上面代码的执行时间间隔我设置的是1秒，并且通过设置参数t去记录执行了几次，在执行4次也就是4秒后终止其运行，运行结果也和预期一致。
我是使用nodeJS运行的，代码也可以放在浏览器运行，f12打开控制台，然后复制代码运行即可，如下：

四、利用setTimeout实现setInterval函数

使用setTimeout来实现setInterval肯定是通过递归来实现的，每次递归执行后记得清除上一次的定时器，下面的代码是函数实现，这里我没有做条件终止，所以会每隔一秒触发一次，一直重复输出下去。
代码实现：

var t = 0;
function myInterval() {
    console.log(t++);
    var timer = setTimeout(() => {
        myInterval();
        clearTimeout(timer);
    }, 1000);
}
myInterval();

结果

---

总结

又是时间紧缺的一天，感觉啥都没干就结束了，今天下午有个学校招聘宣讲会，下午过去看人家宣讲会，蹦着有前端的实习工作去的，结果过去听完宣讲会，才发现人家前端好像不缺人，前端实习不是急招的… 我人都裂开了，前端真的不缺人嘛，感觉找个实习好难，尤其是对于我这么菜的人来说，哈哈哈！JAVA后端和Python后端实习都缺，就是不缺前端，没办法，但是这个公司笔试题还是有点意思，给了一堆图，然后找规律，像是思维逻辑图，做起来还是挺有意思的，最后做完题，又把自己的简历交了上去，不知道能不能有实习的机会，继续加油吧！反正光脚的不怕穿鞋的，加油干就完事了！冲！！！

—— 2020.11.16 19:12 今天继续跑步，冲！

今日份励志名言：

“有志者、事竟成，破釜沉舟，百二秦关终属楚；
苦心人、天不负，卧薪尝胆，三千越甲可吞吴。”
——（语出 蒲松龄）