手撕系列——手撕防抖节流

一、简单介绍

防抖节流 是前端性能优化的重要方法之一,他们俩的目标非常明确,减少对服务器的请求,继而减轻对服务器的负载,是一种性能优化的方式。

防抖

体现: 百度输入框每输入一个字都会向后端发起请求,为了减少不必要的请求,我们减少请求的次数。用 防抖我们可以设置一个时间,如果在这个时间内频繁触发某个事件,我们就不执行这个事件,如果超出这个时间(前后两次事件间隔时间超出这个时间),就执行这个事件!

实现

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
  </head>
  <body>
    输入:<input type="text" id="input" />
    <div>触发了 <span id="n">0</span></div>

    <script>
      var n = 0;
      document.querySelector("#input").onkeydown = _.debounce(search, 1000);
      function search() {
     
        n++;
        document.querySelector("#n").innerHTML = n;
      }
    </script>
  </body>
</html>

节流

体现:当我们连续触发某个事件的时候,我们可以设置一个时间(1000ms),当监测到我们一直触发事件的时候,就每隔设定的时间(1000ms)触发一次事件!

未完…

你可能感兴趣的:(前端性能优化,手撕系列,js,前端,es6,防抖,节流)