问题

什么是防抖和节流？有什么区别？如何实现？

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

思路

每次触发事件时都取消之前的延时调用方法

<!--
 * @Description: 防抖
 * @Author: Jasper
 * @Github: https://github.com/yuanxinfeng
 * @Date: 2019-10-30 16:25:35
 * @LastEditors: Jasper
 * @LastEditTime: 2019-10-30 16:55:01
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>test</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <ul id="sy"></ul>
  </body>
  <script>
    let arr = new Array();
    let index = 0;
    let ipt = document.getElementById("ipt");
    function debounce(_func_) {
      // 创建一个标记用来存放定时器的返回值
      let timeOut = null;
      return function() {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeOut);
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 _func_ 函数
        setTimeout(() => {
          _func_.apply(this, arguments);
        }, 300);
      };
    }
    function sayHi() {
      index++;
      console.log(`防抖成功${index}！！！`);
      arr.push(`防抖成功${index}！！！`);
      if (!ipt.value) clear();
      sy();
    }
    function clear() {
      arr = [];
    }
    function sy() {
      let str = "";
      arr.map((n, i) => {
        str += `<li>${n}</li>`;
      });
      document.getElementById("sy").innerHTML = str;
    }
    ipt.addEventListener("input", debounce(sayHi));
  </script>
</html>

例子

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

思路

每次触发事件时都判断当前是否有等待执行的延时函数

<!--
 * @Description: 节流
 * @Author: Jasper
 * @Github: https://github.com/yuanxinfeng
 * @Date: 2019-10-30 17:01:25
 * @LastEditors: Jasper
 * @LastEditTime: 2019-10-30 17:28:55
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>throttle</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div{
       padding: 10px;
       margin: 10px;
      }
    </style>
  </head>
  <body>
   <div>
     <h1>宽:</h1>
     <input type="text" id="cw" />
     <h1>高:</h1>
     <input type="text" id="ch" />
   </div>
  </body>
  <script>
    let cw = document.getElementById("cw");
    let ch = document.getElementById("ch");
    cw.value = document.body.clientWidth;
    ch.value = document.body.clientHeight;
    function throttle(_func_) {
      let run = true;
      return function() {
        if (!run) return;
        run = false;
        setTimeout(() => {
          _func_.apply(this, arguments);
          run = true;
        }, 300);
      };
    }
    function sayHi(e) {
      cw.value = e.target.innerWidth;
      ch.value = e.target.innerHeight;
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener("resize", throttle(sayHi));
  </script>
</html>

例子
自己可以贴下来跑一下