Web前端最全网站开发进阶（六十九）防抖节流_网页防抖间隔，高级web前端面试答案解析

2401_84411522

于 2024-05-17 05:42:16 发布

阅读量245

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411522/article/details/138987566

版权

程序员专栏收录该内容

217 篇文章 0 订阅

订阅专栏

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

只要触发，就会清除上一个计时器，又注册新的一个计时器。直到停止触发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);
      prev = now;
    }
  };
}

从以上逻辑代码可以看出来「节流重在开关锁 timer=null」

四、总结

防抖：防止抖动，单位时间内事件触发会被重置，避免事件误触发多次。
节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。

五、何时使用函数防抖、函数节流

使用函数防抖、函数节流可根据以下需求场景：

当我们只需要处理最后一次触发事件时，用函数防抖。如窗口大小值变化时，并不需要计算中间变化的过程，只需要窗口大小改变完成后的值。
当事件触发过于频繁，我们需要限制事件处理程序的调用频率时，用函数节流。

六、示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="bt1">防抖</button>
    <button id="bt2">节流</button>
  </body>
  <script>
 // 防抖
 function debounce(func, wait) {
 let timeout;
 return function () {
 if (timeout) window.clearTimeout(timeout);
 timeout = window.setTimeout(function () {
 func.apply(this, arguments);
 }, wait);
 };
 }


### 最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

![前端资料图.PNG](https://img-blog.csdnimg.cn/img_convert/3775113d16dbf48b3a50befae75959d9.webp?x-oss-process=image/format,png)


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

[外链图片转存中...(img-V9uEfBYv-1715895713379)]

2401_84411522

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web前端最全网站开发进阶（六十九）防抖节流_网页防抖间隔，高级web前端面试答案解析

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
复制链接

扫一扫