防抖和节流

防抖：

防抖应用场景

  • scroll事件滚动触发事件
  • 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
  • 表单验证
  • 按钮提交事件。
  • 浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。
<!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>
    <h1>防抖</h1>
    <input type="text" id="ipt" />
  </body>
  <script>
    const inputDom = document.getElementById('ipt')
    // 高频事件触发后一段时间（delay）只会执行一次函数，如果指定时间（delay）内高频事件再次被触发，则重新计算时间
    function debounce(fn, delay) {
      let timer = null
      return function () {
        let args = arguments;
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, args)
        }, delay)
      }
    }

    inputDom.addEventListener(
      'input',
      debounce(e => {
        console.log('发送网络请求', e.target.value)
      }, 300)
    )
  </script>
</html>

 

节流：

节流的应用场景

  • DOM 元素的拖拽功能实现（mousemove）
  • 搜索联想（keyup）
  • 计算鼠标移动的距离（mousemove）
  • Canvas 模拟画板功能（mousemove）
  • 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
  • 监听滚动事件判断是否到页面底部自动加载更多
<!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>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <h1>节流</h1>
    <div class="box" draggable="true"></div>
  </body>
  <script>
    const box = document.querySelector('.box')
    // 节流 一段时间内只执行一次某个操作； 过了这段时间 还有操作的话 继续执行新的操作
    function throttle(fn, delay) {
      let timer = null
      return function (...args) {
        if (timer) {
          return
        }
        timer = setTimeout(() => {
          fn.apply(this, args)
          timer = null
        }, delay)
      }
    }
    box.addEventListener(
      'drag',
      throttle(function (e) {
        console.log(e.offsetX, e.offsetY)
      }, 300)
    )
  </script>
</html>

 

posted @ 2022-01-19 14:29  云卷芸舒  阅读(38)  评论(0)    收藏  举报