js防抖动-每天一个知识点什么是js防抖动?一个简单的防抖实现添加两张对比图这是没有防抖动的效果这是加了防抖函数的效果

什么是js防抖动?

我是这样理解的，限制某个事件（函数）在指定时间内不重复触发。比如有一个输入框，当用户输入后进行远程搜索，如果不限制频次，用户每输入一个字符就会发起网络请求，但请求的很大可能不是用户想要的，这时候就可以用防抖动机制，规定用户在500ms内没有新的输入才发起网络请求。

一个简单的防抖实现


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>debouce-每天一个知识点</title>
  </head>
  <body>
    <input type="text" id="name" />
  </body>
  <script>
    //防抖函数
    function debounce(fn, wait = 500) {
      var timer;
      return function() {
        clearTimeout(timer);
        timer = setTimeout(fn, wait);
      };
    }
    //自己业务函数
    function yourFunction() {
      var value = document.querySelector("#name").value;
      console.log(value);
    }

    //使用
    document
      .querySelector("#name")
      .addEventListener("input", debounce(yourFunction, 500));
  </script>
</html>

添加两张对比图

这是没有防抖动的效果

这是加了防抖函数的效果