前端面试题：防抖节流

防抖节流的实现

防抖

当连续触发事件的时候，事件不会持续触发，当一定时间内没有触发事件后，事件函数才会执行。
实现防抖函数用到闭包。
以下是防抖函数`

<input id="input">
var inp = document.getElementById("input")
<script>
//防抖函数的主体
//func是事件触发后调用的函数体
//time设定多久没有触发事件后开始调用事件函数
function debounce (func,time) {
 	let timer
 	return function fun () {
 		 clearTimeout(timer)//如果不适用闭包的话，此时的timer是undefined
 		 timer = setTimeout(function () {
 		  	func()
 	 	 },time)
 	 }
}
//定义事件触发后调用的函数体
function func () {
 	console.log("事件触发")
 }
//此时debounceInput是fun
var debounceInput = debounce(func)
//定义键盘事件
btn.onkeyup = function () {
 	debounceInput ()
 }
</script>

此时连续按下键盘在控制台并不会输出，当按下键盘并持续一定时间内没有再按下键盘，事件函数才被触发，运用到闭包在全局中访问局部变量的技术

节流

与防抖相似，同样运用到闭包
什么是节流？
当持续触发事件时，保证一段时间内，只调用一次事件处理函数`

<button id = "btn">点击<button>
<script>
var btn = document.getElementById('btn')
//节流函数主体，在两秒内持续触发事件，只调用一次事件处理函数
    function throttle (func){
        let timer
        return function (){
          if(!timer){
              timer = setTimeout(function (){
                  timer = null
                  func()
              },2000)
          }
        }
    }
    //事件处理函数
    function handleClick () {
        console.log("事件触发")
    }
    var todoThrottle = throttle(handleClick)
    btn.onclick = function (){
        todoThrottle()
    }
</script>