Web前端最全项目提交按钮没防抖，差点影响了验收(1)，2024年最新阿里技术岗面试

前端资料汇总

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

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

业务单据页面大约几百个，项目里面的按钮几千个，项目里面的按钮由于场景复杂，分别用了如下几种写法：

• dx-button
• div
• dx-icon
• input type=button
• svg

由于面临交付，领导希望越快越好，最好一两天之内解决问题

还好我们领导没有说这问题当天就要解决 😁

解决方案

1. 添加防抖函数

按钮点击添加防抖函数，设置合理的时间

function debounce(func, wait) {
  let timeout;
  return function () {
    if(timeout) clearTimeout(timeout);
    timeout = setTimeout(func, wait)
  }
}

优点

封装一个公共函数，往每个按钮的点击事件里加就行了

缺点

这种情况有个问题就是在业务复杂的场景下，时间设置会比较棘手，如果时间设置短了，接口请求慢，用户多次点击还会出现问题，如果时间设置长了，体验变差了

2. 设置按钮禁用

设置按钮的 disabled 相关属性，按钮点击后设置禁用效果，业务代码执行结束后取消禁用

this.disabled = true
this.disabled = false

优点

原生按钮和使用的UI库的按钮设置简单

缺点

div, icon, svg 这种自定义的按钮的需要单独处理效果，比较麻烦

3. 请求拦截器中添加loading

在请求拦截器中根据请求类型显示 loading，请求结束后隐藏

优点

直接在一个地方设置就行了，不用去业务代码里一个个加

缺点

由于我们的技术栈使用的 angular8 内置的请求，无法实现类似 axios 拦截器那种效果，还有就是项目中的接口涉及多个部门的接口，不同部门的规范命名不一样，没有统一的标准，在实际的业务场景中，一个按钮的行为可能触发了多个请求，因此这个方案不适合当前的项目

4. 添加 loading 组件（项目中使用此方案）

新增一个 loading 组件，绑定到全局变量中，按钮点击触发显示 loading，业务执行结束后隐藏。

loading 组件核心代码

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  private isLoading$ = new BehaviorSubject<boolean>(false);
  private message$ = new BehaviorSubject<string>('正在加载中...');
  constructor() {}
  show(): void {
    this.isLoading$.next(true);
  }
  hide(): void {
    this.isLoading$.next(false);
  }
}

主要是 show() 和 hide() 函数，将 loading 组件绑定到 app.components.ts 中，绑定组件到window 对象上，

window['loading'] = this.loadingService

在按钮点击时触发 show() 函数，业务代码执行结束后触发 hide() 函数

window['loading'].show();
window['loading'].hide();



### 最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

  ![](https://img-blog.csdnimg.cn/img_convert/64ce8432d0f753e43f93972ad19fcd72.png)


![](https://img-blog.csdnimg.cn/img_convert/d508b1ae6a5e7d5e7d5daf668e9eccea.png)