js防抖 debounce

最新推荐文章于 2024-08-08 15:58:10 发布

陈佳兵001

最新推荐文章于 2024-08-08 15:58:10 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/qq_35603474/article/details/103697916

版权

javascript 基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是防抖

比如我们监听输入框的keyup事件，他会无间隔的一直触发，如果这个监听会触发http请求的话，会对服务器造成很大的压力，这时候就需要防抖来解决这种事情，它会在输入完成再利用setTimeout回调函数去执行方法体。简单的来说就是定义一个setTimeout的定时器，如果timer有值就清空定时器，执行完setTimeout回调就清空timer。
下面代码简单演示一下：

防抖代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>练习</div>
  <div>
    <input type="text" id="inp"/>
  </div>
  <!-- <script src="./index.js"></script> -->
  <script>
    const $inp = document.getElementById('inp')
    let timer = null
    $inp.addEventListener('keyup', () => {
      if(timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        console.log($inp.value)
        timer = null
      }, 500)
    })
  </script>
</body>
</html>

封装 debounce

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>练习</div>
  <div>
    <input type="text" id="inp"/>
  </div>
  <!-- <script src="./index.js"></script> -->
  <script>
    function debounce(fn, delay = 500) {
      //闭包 timer
      let timer = null
      return () => {
        if(timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
    const $inp = document.getElementById('inp')
    $inp.addEventListener('keyup', debounce(() => {
      console.log($inp.value)
    }))
  </script>
</body>
</html>