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

1. 防抖

高频率事件在n秒内只触发一次，如果再次被触发，则从新计时
  • 计划
设置定时器，当n秒内再次被触发，则革除定时器。
<button id="btn">提交</button><script >document.getElementById('btn').addEventListener('click', submit)function submit(){    console.log('申请数据')}</script>
下面是最简略的提交按钮,当初的需要是点击按钮，申请后盾的数据。
如果依照下面的代码，能够实现，然而如果用户间断点击，就在造成资源节约。这里就用到了防抖。
document.getElementById('btn').addEventListener('click', debounce)let timer = nullfunction debounce(){    clearTimeout(timer)    timer = setTimeout(function() {        submit()    }, 1000)}function submit(){    console.log('申请数据')}
下面实现了最根本的 需要，当初有点不好，就是咱们定义了一个全局变量。基于尽可能少的定义全局变量，咱们将
变量放入debounce 函数的外部
能够做以下实现
document.getElementById('btn').addEventListener('click', debounce(submit))function debounce(fn){    let timer = null    return function() {           clearTimeout(timer)       timer = setTimeout(function() {           fn()       }, 1000)    }}function submit(){    console.log('申请数据')}
这里是基于闭包实现的，按钮element 监听了 click事件，并执行debounce办法，debounce办法又返回一个新函数
，这里的timer 就会始终存在，不被销毁，因为函数被内部援用。
所以下次点击的时候timer 还是存在，咱们点击的时候首先会clearTimeout，也就是勾销上次的申请。

2.节流

高频率事件在n秒内只触发一次，n秒内不再触发。
  • 计划
还是基于下面的例子
document.getElementById('btn').addEventListener('click', throttle)let flag = truefunction throttle(){    if (!flag) return    flag = false    setTimeout(function(){        submit()        flag = true    },1000)}function submit(){    console.log('申请数据')}
下面定义了一个标记flag 示意以后函数执行状态，如果以及过了1秒，申请数据执行后，咱们将flag设置成true，
阐明函数可从新执行，否则就间接返回，不执行setTimeout，优化一下
document.getElementById('btn').addEventListener('click', throttle(submit))function throttle(fn){    let flag = true    return function() {      if (!flag) return      flag = false      setTimeout(function(){          fn()          flag = true      },1000)    }}function submit(){    console.log('申请数据')}