js防抖动函数

js防抖动函数

xmh • 2020年03月12日 am11:50 • 前端开发, Javascript, • 阅读 1715

什么是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>

这是没有防抖动的效果

js防抖动函数

这是加了防抖函数的效果

js防抖动函数

相关推荐