如何实现一个防抖函数

领航猿麦兜
106 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

函数防抖是我们 JavaScript 中非常重要的一个话题。函数防抖这个话题我们将从如下 5 个方面给进行一个介绍。

  • 我们要知道什么是函数防抖，我们要理解函数防抖概念。
  • 函数防抖使用场景。
  • 如何实现这个函数框等。
  • 面试官主要考察什么。
  • 在面试中遇到该题目，我们该如何回答？

什么是函数防抖

当我们的事件被触发 n 秒之后再执行回调，这个事件就是我们 DOM 节点上绑定的这个事件，它被触发 n 秒之后再执行回调。如果在这 n 秒之内又被触发，则重新计时。

函数防抖使用场景

比如使用某宝查找宝贝时候，在搜索输入框中输入要搜索宝贝的值，它会进行自动搜索，例如正在输入 a...... 时，淘宝自动搜索。

image.png

在这个输入的过程中，我们观察这个下边 network 面板。开始当我们一直输入 a 没有。当我们 a 输入停的时候,a它才会请求我们的这个服务器然后去拿结果。

它的一个具体使用场景，就是说当我们这个事件被触发 n 秒之后，他再去执行我们这个相应的操作。如果说在这个过程中事件被重新触发了，那么就会重新计时。所以说我们的这个场景里，它只会调用一次我们这个 ajax 请求。这样做的目的就是为了减少 http 请求，节约带宽，然后相对于服务器来说这是一个很大的一个优化。

如何实现这个函数框等

在代码中，函数防抖具体是如何实现的。

先来演示不使用防抖函数。

<!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">
  <title>debounce</title>
</head>
<body>
  <input type="text" id="searchElement">
  <script>
    const searchElement = document.getElementById("searchElement");
     searchElement.oninput = function(){
            console.log('getData')
     }
  </script>
</body>
</html>

运行结果，当我们在输入中输入每一个 a 时，都对应有一个输出。

image.png

当我们有 1000 个或者是 10000 个用户同时来用这个输入框向我们的服务器发请求的话，对我们的服务器是一个非常大的挑战。所以这个时候我们要给它加一个函数防抖，来解决一下这个服务器压力过大这个问题。

使用防抖函数实现

<!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">
  <title>debounce</title>
</head>
<body>
  <input type="text" id="searchElement">
  <script>
    const searchElement = document.getElementById("searchElement");
    // 1.返回值是函数
    // 2.固定间隔执行·事件响应函数
    const debounce = (fn,initial)=>{
      let timer = null;
      return () => {
        clearTimeout(timer)
        timer = setTimeout(fn,initial)
      }
    }
    searchElement.oninput = debounce(function(event){
      const value = searchElement.value;
      console.log(`value`, value);
    },1000)
  </script>
</body>
</html>

运行结果，当我们在输入框输入 a 是，不会马上输出，而是需要等待一段时间后，在输出结果。

image.png

我们来看一下防抖函数它的几个实验关键点：

  • 第一个，防抖函数它的返回值是一个函数。因为我们 input 这个事件本身需要一个函数，所以要给它返回一个函数才能，给我们的 input 框绑定上我们的事件。当然防抖函数并不一定是运用在我们的 input 框中，其他场景下，我们的事件绑定也是需要一个函数的，所以它的返回值是一个函数。

  • 第二个，时间响应函数是在 n 秒之后去执行的，就是固定间隔执行事件响应函数。

面试官主要考察什么？

  • 第一，是否知道函数防抖的这个概念。

  • 第二，如果在这个执行过程中，再次触发了我们这个事件响应函数，那么它会把这个之前的这个事件响应给清除掉，这个事件函数只执行一次。是否知道函数防抖的具体使用场景，比如淘宝搜索框。

  • 第三，是否对项目本身的性能有所关注。这个性能就指的是我们服务端的一个性能，加了防抖之后，我们可以减少 HTTP 请求，节省服务器带宽。

面试中遇到该题目我们该如何回答？

  • 第一，我们要说出函数防抖的一个概念。

  • 第二，列举出函数防抖的具体使用场景，比如搜索框、电商平台网站搜索商品、后台管理系统中数据的一个查询。

  • 第三，说出或者写出函数防抖的实现方式。

avatar
文章
阅读
粉丝