持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

防抖

─────────────────────────────────────────────小提示:文末有具体代码演示

概念：防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。作用：减少逻辑执行的次数。应用场景：搜索框只在输入完后，才执行查询的请求。如:淘宝搜索框等好处：这样可以有效减少请求的次数，节省网络资源,性能优化

还是不懂什么是防抖?或者记不住?还是举个栗子

截图.png

moba游戏应该都玩过,比如王者荣耀!而防抖就如同回城,多次触发,只执行最后一次

嗯嗯嗯.png 假设回城需要5秒,那么在此期间连续触发回城，每次触发都会重新计时（重新读条），直到回城倒计时结束，才可以真正执行回城

终于等到代码了!代码演示如下:

<!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>
  <div><img src="./王者回城.gif"></div>
  <button id="btn">回城</button>
  <p>假设回城时间需要5秒</p>
  <script>
    //全局变量的 timer
    let timer = null
    document.querySelector('#btn').onclick = function () {
      //防抖的核心多次触发时,上次未执行,就取消
      clearTimeout(timer)
      //多次触发,只执行最后一次
      timer = setTimeout(function () {
        //执行代码写这里
        document.querySelector('img').style.display = 'none'
        console.log('回城咯!');
      }, 5000)
    }
  </script>
</body>
</html>

王者荣耀告诉你什么是防抖!

防抖