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

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

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