JS中的防抖与节流

防抖：指触发函数后n秒执行，如果n秒内没有再次触发，则执行函数；如果n秒内再次触发函数，则之前的计时取消，重新开始计时；

 <h1>当前点击: <span>0</span></h1>
 <button>点击</button>

let btn = document.querySelector('button')
btn.onclick = debounce(count, 1000)
​
// 计数器
function count() {
  let span = document.querySelector('span')
  span.innerHTML = parseInt(span.innerHTML) + 1
}
​
// 防抖函数
function debounce(fn, time) {
  let timer = null
  return function() {
    if(timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply()
    }, time)
  }
}

节流：n秒内只执行一次函数，函数执行完，需要等n秒才能再次执行

// 节流函数
function throttle(fn, sleep) {
  let timer = null
  return function() {
    if(timer) return
    fn.apply()
    timer = setTimeout(() => {
      clearTimeout(timer)
      timer = null
    }, sleep)
  }
}