面试官：什么是防抖和节流？如何实现？应用场景？_2024面试前端防抖与节流应用场景

2401_84437095

于 2024-04-27 15:50:25 发布

阅读量212

点赞数 2

文章标签：面试前端职场和发展

本文链接：https://blog.csdn.net/2401_84437095/article/details/138251268

版权

本文详细介绍了前端开发中的防抖和节流两种常见技术，通过电梯比喻解释其工作原理，并提供了JavaScript代码示例。同时提及了这些技术在大厂面试中的重要性，附带了相关学习资源链接。

摘要由CSDN通过智能技术生成

一、定义

防抖：在触发一次函数后的规定时间内没有再次触发才执行

节流：连续触发事件，在规定时间内只执行一次

来个经典的比喻，帮助你更好理解：

我们把电梯完成**一次运送**，类比为一次函数的**执行和响应**。 
假设电梯有两种运行策略** debounce **和** throttle **，超时设定为15秒，
不考虑容量限制。 **防抖**：电梯第一个人进来后，
等待15秒。如果过程中又有人进来，15秒等待重新计时，
直到15秒后开始运送。 **节流**：电梯第一个人进来后，15秒后准时运送一次。

二、实现

防抖的实现

实现：实现前端一个按钮，当你频繁点击时，并不会发送请求，只有当你在规定时间内没有再点击时，才会执行函数。如果停止点击但是在规定时间内再点击，会重新触发计时。

思路：在一段连续操作结束后，处理回调，利用clearTimeout和setTimeout实现。

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./debounce.js"></script>
  <title>Document</title>
</head>
<body>
 <button id="btn">0<button>   <!-- 按钮实现 -->
 
  <script src="./debounce.js"></script>   <!-- 引入防抖js文件 -->
  <script>
    let count=0         <!-- 记录点击次数 -->
    let btn=document.getElementById("btn")   <!-- 获取DOM结构 -->

    function add(e){       <!-- 实现按钮点击次数递增 -->
      console.log(this);
      this.innerHTML=count++
      return 123
    }
   
    btn.addEventListener('click',debounce(add,1000))    <!-- 监听按钮点击事件 -->
  </script>
</body>

</html>

js代码： (这里涉及到了闭包及this的原理)

 function debounce(func,wait){
   let timeout,result
   return function(){
     let args=[...arguments]   //获取事件参数
     clearTimeout(timeout)     //清除上一次的定时器
     timeout= setTimeout(()=>{
       result=func.apply(this,args)   //this显示绑定
     },wait)//定时器会修改this指向 定时器词法环境大多数都是window
     return result
   }

节流的实现

实现：实现前端一个按钮，在一个规定时间内，只能触发一次函数。如果这个时间内按钮多次点击，只有一次生效。

思路：使用时间戳的写法实现。

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./throttle.js"></script>
  <title>Document</title>
</head>
<body>
  <button id="btn">0</button>
    <script>
      let count=0
      let btn=document.getElementById("btn")
  
      function add(){
        console.log(count);
        btn.innerHTML=count++
        return 123


### 最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于**前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等**

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

![](https://img-blog.csdnimg.cn/img_convert/7d52d386b0999642256b4f9f3862dc5a.webp?x-oss-process=image/format,png)

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

[外链图片转存中...(img-eR6yIAhW-1714204215189)]

**前端视频资料：**
![](https://img-blog.csdnimg.cn/img_convert/a0b36fe376cce710af781366e9004515.webp?x-oss-process=image/format,png)

2401_84437095

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试官：什么是防抖和节流？如何实现？应用场景？_2024面试前端防抖与节流应用场景

防抖：在触发一次函数后的规定时间内没有再次触发才执行连续触发事件，在规定时间内只执行一次我们把电梯完成**一次运送**，类比为一次函数的**执行和响应**。假设电梯有两种运行策略** debounce **和** throttle **，超时设定为15秒，不考虑容量限制。**防抖**：电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送。**节流**：电梯第一个人进来后，15秒后准时运送一次。
复制链接

扫一扫