面试官必问系列之性能优化中的防抖和节流

最新推荐文章于 2024-08-08 20:32:09 发布

原创

最新推荐文章于 2024-08-08 20:32:09 发布 · 313 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #面试

什么是防抖？什么是节流？

防抖：用户触发高频事件(比如说点击事件)后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间，n秒后再执行。总之，就是等待用户触发完事件n秒内不再触发事件，再执行函数。

节流：用户触发高频事件(比如说点击事件)后n秒内函数只会执行一次。也就是说，不论用户在n秒内触发多少次事件，最终函数都会在n秒后执行一次。

防抖和节流的应用场景

防抖：

登录、发短信等按钮，避免发送多次请求
文本编辑器的自动保存
input输入框，每隔特定时间发送请求（输入搜索）或者展开下拉列表（节流也可以）

节流：

scroll滚动事件，每隔特定时间执行回调函数
浏览器窗口大小resize，避免次数过于频繁（防抖也可以）

手动实现防抖和节流

防抖

//debounce函数接收两个参数，第一个是要执行的函数，第二个是指定的时间间隔，也就是上述的n
function debounce(fn, delay) {
   
   
	//定时器
	let timer  = null;
	return function(...args)

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小明与核桃

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

面试官：什么是防抖和节流？有哪些实现方式？

weixin_42686892的博客

02-23

760

通俗理解防抖平时我们买手机或者相机，都具有防抖功能，相机的防抖和这里防抖逻辑上是一样的。当我们拿起相机记录视频的时候，我们的手会不停的抖动，但是拍出的视频却抖的却不是很厉害，原因就是相机把n毫秒之内的抖动给忽略掉，使相机的镜头始终保持在n毫秒之前的状态。节流物体在的移动在空间和时间上是连续的，但是我们记录的视频却是一帧一帧的，原因就是相机忽略了n毫秒内的物体移动，以节省存储空间。这个过程可以理解为节流。其实说明一些问题未必要举和事物本身不一样的东西，那接下来我们就拿开发网页时真是遇见的场

前端主流面试官必问超详细面试题(整理完以秃头)持续更新中

qq_43375584的博客

07-07

4429

CDN利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用：（1）在性能方面，引入CDN的作用在于：（2）在安全方面，CDN有助于防御DDoS网络攻击：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。比如：在较长的网页中。如果有很多图片，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果我们使用图片的懒加载就可以解决

参与评论您还未登录，请先登录后发表或查看评论

面试官最喜欢问的防抖与节流

zero_person_xianzi的博客

04-16

609

前言根据我以往的面试经验来看，防抖与节流基本是必考题了。可惜我以前并不是很重视这两个概念。我记得当时是这样回答的。笔者以往回答防抖和节流是为了防止用户重复点击而衍生的两个概念，我不知道这两个概念是什么意思。但是我可以告诉你如何防止用户重复点击。可以采用… (省略) 基础各位也看到了，回答的不是很好。面试官肯定觉得我这个人对理论不重视。这样肯定不行，所以我决定写一篇博客，从基础概念开始讲。...

今天面试官问了我函数节流和函数防抖，前端优化中常用的方法

每天积累一点点

05-07

314

为什么需要节流和防抖呢例如：百度输入框，输入框中的内容发生改变时，就会发送服务端请求；若输入hello（连续输入），会发送5次请求，这样会影响浏览器的性能。此时，我们需要改变其发送请求的次数降低浏览器的压力，输入hello发送一次请求就可以。在js使用函数节流或者函数防抖和函数节流来解决上述问题，下面我们就来了解一下这两种方法函数防抖什么是函数防抖[debounce]? 函数...

Vue报错：TypeError: n.apply is not a function

小叶子的程序媛生活

05-27

1636

使用vue开发项目时，控制台一直报错 TypeError: n.apply is not a function 的解决方案：报错信息如下按照报错信息查询到的行数也没有看到具体的内容。搜索解决方案时看到大家都说是参数名与方法名重复导致的，但是一一对比之后发现不存在这样的情况。于是采用暴力纠错方案：分段注释代码，找出到底是哪里的代码导致的问题。（某些时候这样的方法很好用）最后发现是这一行代码引起的报错：定位到报错的位置就方便找解决方案了，搜索该插件的官方API，看到了这一行：修改.

vue报错apply is not a function

LingSnow1019的博客

01-22

1444

vue在控制器报 `TypeError: handler.apply is not a function！` 出这个问题的原因是因为事件名与你的变量名一样而发生冲突，所以解决的话只要换一个名字就行

underscore 的debounce

weixin_33748818的博客

02-24

153

2019独角兽企业重金招聘Python工程师标准>>> ...

“约见“面试官系列之各系列目录汇总（建议学习收藏）

热门推荐

歌谣的博客

07-11

5万+

1.谢谢你那么酷还来关注我，微信公众号GY歌谣，私信可一起学习交流(前端学习ing) 唯一微信号GrievedGeYao 2.18届应届毕业生本科三年工作经验 96年 3.想去的地方很远想买的东西很贵想守护的东西很美好所以选择努力。 4拼搏到无能为力，坚持到感动自己

简单入门到彻底搞懂防抖和节流

robinhunan的博客

05-19

1687

防抖和节流是怎么回事？如何搞懂防抖和节流？如何防抖节流？防抖和节流应用场景是什么样的，防抖和节流应用在什么地方？防抖和节流有什么用途呢？

解析underscore中的debounce

weixin_30443747的博客

09-06

229

先奉上源码取自Underscore.js 1.9.1的debounce _.debounce = function(func, wait, immediate) { var timeout, result; var later = function(context, args) { timeout = null; if (args) result = func.appl...

underscore方法--debounce

子非鱼

12-27

1241

用法_.debounce(function, wait, [immediate]) Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the la

解析underscore源码之--debounce

cas_nj的博客

07-02

457

在正式介绍underscore的debounce函数之前，我们先来复习一下几个小小的概念，请先看如下这个简单的示例，以便大家理解。function a() { var bv = 'B'; console.log('A'); function b() { console.log(bv) } return b }; var s = a(); s(...

underscore 的 debounce 的实现

xiongzhengxiang的专栏

12-25

1333

debounce_.debounce(function, wait, [immediate]) Creates>Pass true for>var lazyLayout = _.debounce(calculateLayout, 300); $(window).resize(lazyLayout); _.debounce = function(func, wait, immediat

underscore debounce函数分析

weixin_34327223的博客

03-23

260

underscore debounce函数分析标签（空格分隔）： underscore 本文是underscore源码剖析系列第六篇文章，上节我们介绍了throttle节流函数的实现，这节将会介绍一下节流函数的兄弟 —— debounce防抖动函数。throttle函数是在高频率触发的情况下，为了防止函数的频繁调用，将其限制在一段时间...

underscore中的函数节流---debounce和throttle

weixin_34150830的博客

03-19

221

2019独角兽企业重金招聘Python工程师标准>>> ...

函数防抖和节流

izwmain的博客

03-22

150

在js事件中有一些会持续触发，例如resize、scroll、mousemove。以mousemove为例，看看函数频繁执行的情况。 const box = document.getElementById('box'); let cnt = 1; function add(){ box.innerText = cnt++; } box.addEventListener('mousemove',...

从 Underscore.js 源码解读节流(throttle) 和防抖(debounce)函数

赛里木湖畔的博客

08-08

442

具体效果可以看下面视频演示。整体简化版本：更好理解。节流防抖函数效果演示。

Vue项目中使用防抖和节流

qq_42730111的博客

11-27

2520

之前有接触过闭包这个概念，但是这个直译让人摸不着头脑，而且各种解释又比较繁杂，现在自己实现了一遍才了解到什么是闭包。用java来举个不严谨的栗子，闭包就是：一个private变量，我们可以通过一个公开的方法去访问它。

一看就会，在Vue中使用防抖函数

liyananweb的博客

05-13

620

API对接平台一键对接等AI模型，无需翻墙，国外信用卡👉在Vue中使用防抖函数可以帮助我们限制某些操作的频率，比如用户在输入框中输入文本时，我们可能不希望每输入一个字符就触发一个事件（如API调用）。防抖函数可以确保直到用户停止输入一段时间后，才执行特定的操作。要在Vue中使用防抖函数，你可以使用第三方库如lodash，或者自己编写一个简单的防抖函数。

中高级前端面试项目难点

最新发布

06-21

### 中高级前端开发面试中的项目难点及解决方案中高级前端开发面试通常会更加注重实际项目经验以及解决问题的能力。以下是一些常见的项目相关难点和考察点，并提供相应的解决方案。 #### 1. **性能优化** - 面试官可能会问到如何优化页面加载速度、减少重绘和回流等问题。 - 解决方案包括使用懒加载技术、图片压缩、代码分割等[^1]。例如，可以利用 Webpack 的 `splitChunks` 功能对第三方库进行单独打包，从而减少主文件的体积。 ```javascript optimization: { splitChunks: { chunks: 'all', }, } ``` #### 2. **前后端分离架构** - 面试官可能会关注你在前后端分离项目中的实践经验，例如如何处理跨域问题、API 调用失败时的容错机制等。 - 可以通过配置 CORS（跨域资源共享）来解决跨域问题，或者使用 JSONP 技术（虽然不推荐，但在某些情况下仍然适用）。此外，还可以在请求失败时设置重试机制。 ```javascript axios.interceptors.response.use( response => response, error => { if (error.response.status === 500) { // 自定义错误处理逻辑 console.error('服务器内部错误'); } return Promise.reject(error); } ); ``` #### 3. **模块化与构建工具** - 面试官可能会询问你对 Grunt、Gulp、Webpack 等构建工具的理解，以及如何根据项目需求选择合适的工具。 - Webpack 是目前最流行的构建工具之一，可以通过插件和 loader 实现复杂的构建需求。例如，使用 `html-webpack-plugin` 自动生成 HTML 文件。 ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], }; ``` #### 4. **团队协作与沟通能力** - 在团队项目中，良好的沟通能力和协作能力是必不可少的。面试官可能会通过你的过往经历来评估这些软技能。 - 例如，在团队项目中，可以通过 Git 分支管理策略（如 Git Flow）确保代码质量，同时定期召开会议以同步进度[^3]。 #### 5. **防抖与节流** - 面试官可能会要求你实现防抖或节流函数，甚至要求结合实际场景进行优化。 - 下面是一个防抖函数的实现，且让函数在一开始立即执行一次，之后按照正常节流逻辑运行[^1]。 ```javascript function debounceThrottle(func, wait) { let timeout; let executedOnce = false; return function (...args) { if (!executedOnce) { executedOnce = true; func.apply(this, args); } clearTimeout(timeout); timeout = setTimeout(() => { executedOnce = false; func.apply(this, args); }, wait); }; } ``` #### 6. **面试心态调整** - 面试过程中保持良好心态非常重要，适当的紧张可以帮助你集中注意力，但过度紧张可能会影响表现。 - 可以通过多次模拟面试来缓解紧张情绪，并逐步适应面试环境[^2]。 ---