1、最好是从字面意思能够解释两者区别，区分开防抖和节流(因为每次网上查完，过一段时间，又会忘记)

2、给出经典的，有说服性的demo

很高兴回答你这个问题，希望可以给你讲述清楚！

我们先举个例子：项目有个需求是输入框在输入的时候进行搜索，展示下拉数据，但是没必要输入一个字都进行搜索，所以想到了在输入结束200毫秒后再进行搜索，从而引出来了 js的节流(throttle)，防抖。

什么是函数防抖和节流呢？

函数防抖(debounce)：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

函数节流(throttle)：

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

代码实现

那我们代码如何实现这两个场景呢？ 看下面例子

防抖函数

function debounce (fn) {  
  let timerout = null
  return function () {
    let args = arguments
    let self = this
    clearTimeout(timerout)
    timerout = setTimeout(() => {
      fn.apply(self, args) // 传参数
    }, 200);
  }
}
window.addEventListener('scroll', debounce(function () {
  console.log(1)
}))

从以上例子可以看出，如果你快速调用这个函数 在定时器还没有出发之前就会被clear。

节流函数

function throttle (fn) {
  let timerout
  return function () {
    let args = arguments
    let self = this
    if (timerout) return
    timerout = setTimeout(() => {
      fn.apply(self, args)
      timerout = null 
    }, 200);
  }
}
window.addEventListener('resize', throttle(function () {
  console.log(1)
}))

从以上可以看出当我们在缩放浏览器窗口的时候，在定时器还没有出发之前是不允许重复触发的！通过上面的例子相信你一定把防抖和节流搞清楚了，希望可以做做练习！