2024Web前端大厂高频面试题，面向后端的前端技术分享，前端开发面试问题回答技巧

setTimeout

核心逻辑：N 秒推入执行栈，而不是 N 秒后执行，

使用场景：延迟执行某个操作时

问题：

• 设置 0 秒也会在下一个宏任务中执行（异步）

• 定时器在 for 中输出 1-10 的坑（forEach 不可跳出循环）

异步

// for & setTimout

for (var i = 1; i <= 10; i++) {

setTimeout(() => {

console.log(i); // ??

}, 1000);

}

因为异步的原因，setTimeout 被延迟到下一次事件循环中执行。

forEach

forEach 不能跳出循环

let arr = [1, 2, 3];

arr.forEach((e) => {

console.log(e);

1, 2, 3;

e += 1;

if (e === 2) {

// break ！X

// return ！X

}

});

console.log(arr); // [1, 2, 3];

在forEach中使用break、return等都不会跳出循环。

上列操作可以转换为for操作

for (let i = 0; i < arr.length; i++) {

if (arr[i] === 2) {

break;

}

arr[i] += 1;

}

console.log(arr); // [ 2, 2, 3 ]

setInterval

使用场景

• 视频学习的定时保存学时

• 扫码登录的轮询

问题

定时器不准确的原因

• N 秒后推入执行栈，而不是 N 秒后执行

• 会因为前面有代码在执行而导致时间变短

案例代码：

假设有一个 HTTP 轮询，每一秒查询一次数据。

let startTime = new Date().getTime();

let count = 0;

setInterval(() => {

let i = 0;

while (i++ < 10000000); // 假设这里是查询数据带来的网络延迟，用来增加每次函数执行的时间

count++;

console.log(

“与原设定的间隔时差了：”,

new Date().getTime() - (startTime + count * 1000),

“毫秒”

);

}, 1000);

代码在执行多次后，定时器会变得不准确，产生误差。

定时器不及时清楚（小程序中）

• 不clear的话会一直保存在内存中，造成内存泄漏。

• 使用场景：保存学时、人脸识别、考试倒计时等

• 多个页面栈共享定时器

解决方法

定时器不准确

解决方法：使用settimeout模拟setinterval

// 自定义一个定时器

let timer = null;

function interval(func, wait) {

let interv = function() {

func.call(null);

timer = setTimeout(interv, wait);

};

timer = setTimeout(interv, wait);

}

// 使用定时器

interval(() => {

let date = new Date();

console.log(“log…”, ${date.getMinutes()}: ${date.getSeconds()});

}, 1000);

// 清楚定时器

setTimeout(() => {

clearTimeout(timer);

}, 1000 * 6);

定时器太多清楚不掉，造成内存泄漏

解决方法：批量清楚定时器

// 清楚当前页面的所有定时器

for (let i = 1; i < 100000; i++) {

clearInterval(i);

clearTimeout(i);

}

建议及时保存定时器的id，用于清除。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算

g-2UZs8NQc-1712237257698)]

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算