防抖与节流：前端开发中的“节奏大师”——一场面试前的轻松复习

answerball
171 阅读2分钟

开场白：从生活到代码，聊聊我们的“节奏感”

想象一下，你正在参加一场舞会。音乐响起，每个人都想跟上节拍，但总有些人动作太快，导致场面变得有些混乱。这时，DJ 站了出来，巧妙地调整了节奏，让每个人都能舒适地跳舞。在前端开发的世界里，我们也有自己的“节奏大师”——防抖（Debounce）和节流（Throttle）。它们就像那位聪明的 DJ，帮助我们在用户交互事件中找到最佳的执行时机，避免过度响应或响应不足。

深入浅出：防抖与节流的工作原理

防抖——等待最后的掌声

防抖就像是在舞台边静静等待的艺术家，他们不会在每个音符落下时就立即表演，而是耐心地等到最后一个音符结束。同样，在前端开发中，当我们希望某个函数只在用户停止操作一段时间后才执行时，就可以用到防抖。比如，当用户在一个搜索框中快速输入文字时，我们不希望每按一个键都触发一次服务器请求。相反，我们可以设置一个短暂的延迟，如果在这段时间内没有新的输入，那么我们就发起请求；如果有新输入，则重新计时。这样既节省了资源，又提高了用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索小助手</title>
</head>
<body>
  <label for="searchBox">请输入要搜素的内容：</label>
  <input type="text" id="searchBox" placeholder="开始你的搜索吧！">
  <ul id="searchResults"></ul>

  <script>
    const searchBox = document.getElementById('searchBox');
    const resultsList = document.querySelector('#searchResults');

    function debounce(func, wait) {
      let timeout;
      return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
      };
    }

    function fetchSearchResults(query) {
      // 这里可以添加对API的调用逻辑
      console.log(`正在查询: ${query}`);
      // 假设这里有一个异步请求...
    }

    const debouncedFetch = debounce(fetchSearchResults, 500);

    searchBox.addEventListener('input', (event) => {
      const query = event.target.value.trim();
      if (query) {
        debouncedFetch(query);
      } else {
        resultsList.innerHTML = ''; // 清空结果列表
      }
    });
  </script>
</body>
</html>

节流——保持稳定的步伐

如果说防抖是在等最后一个音符，那么节流就是以固定的步伐前进。它确保某个函数在特定的时间间隔内最多只能执行一次，即使期间发生了多次触发。例如，当你滚动页面时，可能需要频繁更新视图，但我们不想每次都去计算复杂的布局。通过节流，我们可以控制这种行为，使得每次滚动一定距离后才进行必要的更新。

巧妙融合：URL、HTTP协议与JSON Server的故事

现在让我们稍微偏离主题，聊聊那些支撑这一切背后的英雄们——URL、HTTP 协议以及 JSON Server。

  • URL 是互联网上的地址，它告诉浏览器去哪里找东西。就像你在地图上标注了一个地点，URL 就是指向网络资源的指针。例如，http://localhost:3001/posts/ 可能指向一个博客文章列表，而 http://localhost:3001/posts/:id 则是查看某篇具体文章的路径。

  • HTTP 协议 是客户端和服务器之间的通信规则。它定义了如何发送请求（Request），以及如何接收响应（Response）。每一次点击链接或者提交表单的背后，都是 HTTP 在默默工作。还记得上面提到的搜索功能吗？当用户输入完毕后，我们的应用程序就会通过 HTTP 发送 GET 请求给服务器，获取匹配的结果。

  • JSON Server 是一个轻量级的数据模拟服务器，非常适合用于测试和开发阶段。它可以基于本地的 JSON 文件快速搭建 RESTful API 接口，让你无需构建完整的后端就能实现前后端分离的项目。比如，如果你想要模拟用户数据，只需创建一个简单的 db.json 文件，里面包含一些预定义的数据结构，然后启动 JSON Server，瞬间就有了一个可供前端调用的 API。

实战演练：filter 和 map 的魔法

回到我们的代码示例，你会发现两个 JavaScript 数组方法的身影——filter 和 map。这两个家伙可是处理数据的好帮手！

下面我们来分析一下吧：

我们先创建了一个array的数组对象，然后查看它的原型方法可以看到，filter和map都在里面

image.png

我们先给数组赋上几个值：

image.png

  • filter 就像一个筛选器，它遍历数组中的每一项，并根据提供的条件筛选出符合条件的元素组成新的数组。在这个例子中，我们使用 filter 来找出所有名字中包含用户输入关键词的用户。

image.png

  • map 则像是一个变形金刚，它将数组中的每一个元素按照指定的方式转换成新的形式，最终返回一个新的数组。在这里，我们利用 map 把匹配到的用户名转换成了 HTML <li> 标签字符串，方便直接插入到 DOM 中显示。

image.png

// 使用 filter 和 map 处理用户数据
const users = [
  { id: '1', name: 'Alice' },
  { id: '2', name: 'Bob' },
  { id: '3', name: 'Charlie' }
];

const searchTerm = 'b';
const filteredUsers = users.filter(user => user.name.toLowerCase().includes(searchTerm.toLowerCase()));
const formattedUsers = filteredUsers.map(user => `<li>${user.name}</li>`).join('');
console.log(formattedUsers); // 输出：<li>Bob</li><li>Charlie</li>

结语：成为真正的“节奏大师”

无论是面对面试官还是实际项目中的挑战，掌握好防抖和节流这两位得力助手，再结合 URL、HTTP 协议及 JSON Server 的基础知识，相信你能轻松应对各种场景。不要忘了，编程是一门艺术，而优秀的开发者正是那些懂得如何在正确的时间做正确事情的人。所以，下次当你遇到类似的问题时，不妨停下来思考一下：“我是不是该请我的‘节奏大师’来帮忙呢？”希望这篇文章不仅给你带来了知识上的收获，也能为你增添几分乐趣。祝你在即将到来的面试中大放异彩！

20200229174423_bzukt.jpg

avatar
文章
阅读
粉丝