[笔记]JS的防抖和节流

最新推荐文章于 2024-06-09 20:17:27 发布

_234

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量172

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_64012291/article/details/127141364

版权

1.什么是防抖？

我的理解就是一段时间内，只执行最后一次的事件调用，如搜索功能，如果用户在输入框按下一个字母，后台就调用一次接口，那用户频繁的输入，频繁的调接口就会非常消耗性能，用户可能是要输入一连串几个字来查询，而不是输入一个字就查询一次，所以为了避免这种一段时间内非常频繁的调用，就需要使用防抖函数。用来限制一段时间内的频繁调用。

就比如用户输入完两秒之后开始查询，一旦两秒内又有新的输入，则不调用接口查询，等用户再次输入完，两秒之后没有继续输入就调用接口查询。

因此，防抖的流程就是，用户输入，调用防抖函数，防抖函数开启一个两秒定时器，一旦用户在两秒内再次输入，则重置计时器，重新开启一个两秒的定时器，当用户两秒后没有再次输入，则执行查询接口函数。

<!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>Document</title>
</head>

<body>
  <input type="text">
  <script>
    // 获取输入框DOM元素
    const oInput = document.querySelector('input');
    // 输入框最终需要调用的函数
    const event = () => {
      console.log(oInput.value);
    }
    // 防抖函数
    function debounce(fn, delay) {
      let timer = null;
      return function () {
        clearTimeout(timer)
        console.log('调用了debounce');
        timer = setTimeout(() => {
          fn()
        }, delay)
      }
    }
    // 将输入框最终需要调用的函数放入防抖函数中
    const inputEvent = debounce(event, 2000)
    // 通过addEventListener监听输入框的input事件，一旦输入，执行inputEvent
    oInput.addEventListener('input', inputEvent)
  </script>
</body>

</html>

2.什么是节流

我的理解是一段时间内，只执行一次事件调用，这个时间段内，不论如何都不会触发第二次事件调用。

就比如一个按钮，设置点击事件，点击之后执行，但是在接下来的2秒内多次点击无效，只能等待这2秒过去，才能再次触发。

<!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>Document</title>
</head>

<body>
  <button>按钮</button>
  <script>
    // 获取按钮DOM元素
    const oButton = document.querySelector('button')
    // 按钮最终需要调用的函数
    const event = () => {
      console.log('通过节流函数，点击按钮了');
    }
    // 节流函数
    const throttle = (fn, delay) => {
      let timer = null;
      return function () {
        if (timer) return
        fn();
        timer = setTimeout(() => { timer = null }, delay);
      }
    }
    // 将按钮最终需要调用的函数放入节流函数中
    const buttonEvent = throttle(event, 2000)
    // 通过addEventListener监听按钮的点击事件，一旦点击，执行buttonEvent
    oButton.addEventListener('click', buttonEvent)
  </script>
</body>

</html>