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

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

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 = null
function 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 = true
function 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('请求数据')
}