最新网站开发进阶（六十九）防抖节流_网页防抖 间隔，面试字节跳动前端工程师该怎么准备

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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

  

  

文章目录

• • 一、前言 - 为什么要防抖或节流
    • 二、防抖 (debounce)
    • 三、节流 (throttle)
    • 四、总结
    • 五、何时使用函数防抖、函数节流
    • 六、示例代码

---

一、前言 - 为什么要防抖或节流

实现防抖或节流，主要基于以下目的：

• 及时查询时，减少服务器压力。
• 频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。
• 需求是以一定的频率执行后续的处理。

二、防抖 (debounce)

所谓防抖，就是把触发非常频繁的事件合并成一次去执行，以免把一次事件误认为多次。即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算，敲键盘就是一个每天都会接触到的防抖操作。

想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢？

• 登录、发短信等按钮避免用户点击太快，以致于发送多次请求，需要防抖；
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；
• 提交表单；
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存；
• input 事件（当然也可以用节流，实现实时关键字查找）；

实现原理：

• 只要触发，就会清除上一个计时器，又注册新的一个计时器。直到停止触发wait时间后，才会执行回调函数。
• 不断触发事件，就会不断重复这个过程，达到防止目标函数过于频繁调用的目的。

逻辑代码如下，可以看出来「防抖重在清零 clearTimeout(timer)」

function debounce(func, wait) {
      let timeout;
      return function () {
        if (timeout) window.clearTimeout(timeout);
        timeout = window.setTimeout(function () {
          func.apply(this, arguments);
        }, wait);
      };
    }

三、节流 (throttle)

节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

• scroll 事件，每隔一秒计算一次位置信息等；
• 浏览器播放事件，每隔一秒计算一次进度信息等；
• input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可防抖实现)；

实现原理：

• 只要触发，只会在当前计时器为空时，注册计时器。
• 不断触发事件，只会在固定的事件间隔触发。

有2种方式实现节流：setTimeout与时间戳。

setTimeout

function throttle(func, wait) {
  let timeout;
  return function () {
    if (!timeout) {
      timeout = window.setTimeout(function () {
        func.apply(this, arguments);
        timeout = null;
      }, wait);
    }
  };
}

时间戳

function throttleTime(func, wait) {
  let prev = 0;
  return function () {
    let now = Date.now();
    if (now - prev > wait) {
      func.apply(this);


### 最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

*   HTML5新特性，语义化

*   浏览器的标准模式和怪异模式

*   xhtml和html的区别

*   使用data-的好处

*   meta标签

*   canvas

*   HTML废弃的标签

*   IE6 bug，和一些定位写法

*   css js放置位置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

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

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

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