关于javascript:什么是防抖和节流有什么区别如何实现

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

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