1、防抖与节流的区别

防抖与节流的区别就是：

假设你一直点击一个按钮：

**防抖：**一直刷新计算时间，一直不会执行，除非等你 2 次点击的间隔时间大于等于防抖的间隔时间

节流：点击后，触发一次，等到间隔时间到达，你如果再点击会再触发，而在此期间是不会触发的

你点击频率： * * * * * * * * * * * * * * * * * * * * * *

防抖触发： ---------------------- ！--------------------------------------！

节流触发：！------- ！---------------！------ ！------- ！ -----

拿一个代码来做下面两个的举例例子：

这是没有加防抖或节流的例子：鼠标在上面移动数字增加

可以看到没有加防抖或节流的话，数字移动的非常夸张

在这里插入图片描述

<div>0</div>

  div {
    width: 200px;
    height: 200px;
    background-color: pink;
    line-height: 200px;
    text-align: center;
    font-size: 60px;
    color: #ffffff;
  }

let div = document.getElementsByTagName('div')[0];
let num = 1;
// 累加函数
function count() {
  div.innerHTML = num++;
}
// 鼠标移动函数
div.onmousemove = count()

2、防抖

2.1、什么是防抖？

指：触发事件后 n 秒内只能执行一次，如果触发后 n秒内又触发了一次，就会重新计算时间

举例

当你在输入框输入东西时，会有下拉框展现你输入的数据列表，

这个防抖就是：你输入一个篮的时候，会在1s后发送请求，但是你又输入了球的时候，会重新计算时间，再次等待1s后才发送请求

2.2、防抖的代码

function debounce(func, waitTime) {
  let timeout = null; // 定时器

   return function(...args) {
     //  如果有定时器的话，先清除之前的定时器，即重新计时
     if(timeout) clearTimeout(timeout);

    // 开始计时，时间到了再执行函数
    timeout = setTimeout(() => { 
      func.apply(this, args)
    }, waitTime);
  }
}

2.3、例子演示

使用上面的例子，添加入防抖的代码，效果如何

let div = document.getElementsByTagName('div')[0];
let num = 1;
function count() {
  div.innerHTML = num++;
}
div.onmousemove = debounce(count, 1000)

// 防抖
// 让鼠标停止移动后 过1s在显示数据
function debounce(func, waitTime) {
  let timeout = null; // 定时器

  return function(...args) {
    //  如果有定时器的话，先清除之前的定时器，即重新计时
    if(timeout) clearTimeout(timeout);

    // 开始计时，时间到了再执行函数
    timeout = setTimeout(() => { 
      func.apply(this, args)
    }, waitTime);
  }
}

可以看到，只要鼠标还在不断移动，数字就不会增加，当鼠标停下来 1s 后，才会增加数字，应证了防抖的概念

在这里插入图片描述

3、节流

3.1、什么是节流？

指：连续触发事件但是在 n 秒中只执行一次函数

举例

类似英雄联盟的技能CD，在你执行了一个技能后，会进入CD，在这个期间，你无论怎么点击都是不会执行的，等CD结束，才可以继续执行

3.2、节流的代码

// 节流
function throttle(func, waitTime) {
  let timeout = null;
  return function(...args) {
    // 如果没有定时器，就添加一个定时器
    if(!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      }, waitTime)
    }
  }
}

3.3、例子演示

使用上面的例子，添加入节流的代码，效果如何

let div = document.getElementsByTagName('div')[0];
let num = 1;
function count() {
  div.innerHTML = num++;
}
div.onmousemove = throttle(count, 1000);

// 节流
function throttle(func, waitTime) {
  let timeout = null;
  return function(...args) {
    // 如果没有定时器，就添加一个定时器
    if(!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      }, waitTime)
    }
  }
}