likes
comments
collection
share

从JSON-Server 到防抖，你都懂了吗？

作者站长头像
站长
· 阅读数 24

前言

在现代Web开发中，构建高效、响应式和可维护的应用程序是开发者追求的核心目标。本文将探讨几个关键概念和技术，包括使用json-server快速搭建后端API、理解RESTful架构原则、以及如何利用ES6特性提升代码质量，最后深入讲解前端性能优化中的防抖（Debounce）技术。

想象一下这样的场景：用户在输入框中快速连续地键入字符，每次输入都想立即发起搜索请求；或者在一个无限滚动列表中，用户飞快地滚动页面，期望内容能够平滑加载。在这些情况下，如果不加控制，事件处理函数将会被无节制地频繁触发，不仅消耗宝贵的计算资源，还可能导致页面响应迟缓、用户体验受损。这就是引入防抖机制的初衷所在。

正文

防抖技术的核心理念在于，它确保某个函数不会在短时间内被连续调用多次，而是仅在最后一次调用后的固定延迟时间后执行。形象地说，就像是给急躁的触发器装上了一个冷静的“缓冲器”，只有当所有动作都平息下来，才真正采取行动。这一策略完美适应于诸如表单验证、窗口大小调整、滚动事件监听等场景，大大减轻了浏览器的负担，提升了应用的流畅度和效率。

防抖（Debounce）

防抖技术的核心理念在于，它确保某个函数不会在短时间内被连续调用多次，而是仅在最后一次调用后的固定延迟时间后执行。形象地说，就像是给急躁的触发器装上了一个冷静的“缓冲器”，只有当所有动作都平息下来，才真正采取行动。这一策略完美适应于诸如表单验证、窗口大小调整、滚动事件监听等场景，大大减轻了浏览器的负担，提升了应用的流畅度和效率。

概念： 防抖技术的核心思想是，当事件被触发时，并不立即执行相应的处理函数，而是等待一个预设的延迟时间。如果在这个延迟时间内事件又被触发了，则重新开始计时。只有当事件停止触发一段时间（即延迟时间）后，才真正执行处理函数。

特点：

  • 防止短时间内连续触发的事件导致处理函数被执行多次。
  • 适用于如搜索框的输入监测、窗口大小调整等场景，确保只在用户操作停止后才执行，如最后一次输入后执行搜索请求。

优点：

  • 能有效减少不必要的函数执行，节约资源。
  • 特别适合于优化网络请求，避免因频繁操作导致的性能问题。

JSON-Server驱动的后端接口

json-server是一个轻量级的工具，它允许你快速搭建一个基于JSON文件的RESTful API服务器。这对于前端开发者来说尤其便利，因为它无需复杂的后端逻辑就能模拟真实API交互，便于前端独立开发和测试。

例如，你可以创建两个JSON文件：users.json和posts.json，分别存储用户和文章信息，并设置外键关联（如users.id = posts.userId），来模拟实际项目中的数据库关系。通过简单的命令行操作，即可启动一个API服务器，提供诸如列出所有用户（GET /users）、获取特定用户（GET /users/:id）、查看所有文章（GET /posts）或获取单篇文章（GET /posts/:id）等RESTful接口。

我们现在通过一个小demo来讲解防抖的执行

写一个搜索栏demo

我们先在命令行输入

npm i json-server

这是安装 json-server 的过程，这个命令通过 Node.js 的包管理器 npm（Node Package Manager）来安装 json-server 这个包。json-server 是一个非常方便的工具，能够快速地将 JSON 文件转换成 RESTful API，特别适合在开发阶段模拟后端服务器，让前端开发者可以在没有后端服务的情况下进行开发和测试。

然后我们新建一个db.json文件，存放我们需要用到的数据

  "users": [
    {
      "id": "1",
      "name": "haha"
    },
    {
      "id": "2",
      "name": "thq"
    },
    {
      "id": "3",
      "name": "wqx"
    }
  ],
  "posts": [
    {
      "id": "1",
      "title": "标题1",
      "content": "内容1",
      "userId": "111"
    },
    {
      "id": "2",
      "title": "标题2",
      "content": "内容2",
      "userId": "222"
    },
    {
      "id": "2",
      "title": "标题3",
      "content": "内容3",
      "userId": "333"
    },
  ]
}

接着在命令行输入

json-server --watch db.json

这条命令会启动一个本地服务器，默认情况下应该是 http://localhost:3000，并且会监视 db.json 文件的任何更改，自动更新 API。这样，你就可以通过 RESTful 接口来访问和操作 db.json 中的数据了，比如 GET, POST, PUT, PATCH, 和 DELETE 请求，对应于资源的查询、创建、更新和删除操作。

例如我们现在使用postman对该数据中的posts添加一个id为5的内容

接着我们写一个简单的页面

<!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>
    <div>
        没有防抖的input <input type="text" id="unDebounce" placeholder="请输入您要搜索的用户名">
    </div>
    </body>
</html>

然后我们给他写上简单的script模块

 <script>
        //不加防抖的
        const inputa = document.getElementById('unDebounce')
        
        function handleNameSearch(e) {
            const value = e.target.value
            fetch('http://localhost:3000/users')
                .then(res => res.json())
                .then(data => {
                    
                    const users = data;
                    const filterUsers =users.filter(user =>{
                        
                        return user.name.includes(value)

                    })  
                    console.log(filterUsers);    

                })
        }

        inputa.addEventListener('keyup',handleNameSearch)

我们获取了输入框中的输入的值，接着使用了异步函数fetch()函数向http://localhost:3000/users发送了请求，然后使用.then()获取了该网址中的json对象转换为值，再使用includes函数，将所拿到的数据进行选择，然后再返回输出;

从JSON-Server 到防抖，你都懂了吗？

但是我们可以发现，当我们按完一个键后，程序就会向该地址发送一个请求，而在日常开发中，所需要的数据往往是几十万上百万的，我们不可能需要一个数据就发送一次请求，服务器会因此过载

所以我们需要防抖

开始防抖！

针对频繁触发的事件（如连续的keyup事件），防抖（Debounce）是一种重要的性能优化手段。其核心思想是在一定时间内，无论事件触发多少次，都只执行最后一次。这样可以有效减少不必要的函数调用，减轻服务器压力，提升用户体验。

实现防抖通常涉及闭包技巧，创建一个通用的防抖函数，接受待执行的函数和延迟时间作为参数。该函数内部维护一个定时器，每次事件触发时，如果前一个定时器还未执行，则清除并重新设定，确保只有在一段时间内没有新的触发时，才执行最终的函数调用。

我们在代码中加入防抖功能

 <div>
        防抖后的input<input type="text" id="debounce" placeholder="请输入您要搜索的用户名">
    </div>
    <script>
      
        const inputa = document.getElementById('unDebounce')
        const inputb = document.getElementById('debounce')
        function handleNameSearch(e) {
            const value = e.target.value
            fetch('http://localhost:3000/users')
                .then(res => res.json())
                .then(data => {
        
                    const users = data;
                    
                    const filterUsers =users.filter(user =>{
                        // console.log(user);
                        return user.name.includes(value)
                        // return user.name.indexOf(value) !==-1

                    })  
                    console.log(filterUsers);    

                })
        }
        
        function debounce(func,delay) {
          
            return function(args) {
                clearTimeout(func.id)
        
                func.id = setTimeout(function() {
                    func(args)
                }, delay)
            }
        }
        const debounceNameSearch = debounce(handleNameSearch,500)

        inputa.addEventListener('keyup',handleNameSearch)
        inputb.addEventListener('keyup',debounceNameSearch)
       
    </script>

引入了debounce函数，这是一个通用的防抖处理函数，接收两个参数：func是要防抖的原函数，delay是延迟执行的时间（毫秒）。debounce函数返回一个新的函数，这个新函数会在被连续调用时，只有在最后一次调用后的delay毫秒内没有再次被调用，才会执行原函数。这样可以有效减少因连续快速触发（如快速键入）而导致的重复请求问题。

而里面的clearTimeout用于取消由setTimeout函数设置的定时器。当你使用setTimeout安排一个函数或某段代码在未来的某个时间点执行时，它会返回一个表示该定时器的唯一ID（通常称为timeout ID）。如果你决定在该定时器触发之前取消执行计划好的任务，就可以调用clearTimeout函数，并传入这个timeout ID作为参数。

从JSON-Server 到防抖，你都懂了吗？

这样我们就成功执行了防抖

总结

通过结合json-server快速搭建API、遵循RESTful原则设计接口、充分利用ES6的现代特性提升代码质量，以及实施防抖策略优化前端性能，开发者能够更高效地构建出高性能、易维护的Web应用程序。这些技术不仅提升了开发效率，也确保了应用在复杂环境下的稳定运行和良好用户体验。

求点赞评论收藏，有问题随时私信博主！

转载自:https://juejin.cn/post/7386587421424058418
评论
请登录