防抖函数

// **快速多次触发事件的回调函数时，只执行最后一次触发回调的业务逻辑代码**
// 以输入框为例
document.queryselector('input').addEventListener('input', debounce(function(){
  ...业务逻辑
}, delay))
// 利用闭包封装一个debounce函数
function debounce(fn, delay){
  let timeID = null
  return function(){
    clearTimeout(timeID)
    timeID = setTimeout(()=>{
      fn.call(this)
    }, delay)
  }
}

节流函数

// **控制高频事件中业务逻辑代码的执行次数。每隔多长才执行一次**
// 利用闭包封装一个throttle函数
function throttle(fn, delay){
  let flag = true
  return function(){
    if(flag){
      setTimeout(()=>{
        // 执行传入的回调函数
        fn.call(this)
        // 执行完毕后将flag设置true
        flag = true
      }, delay)
    }
    flag = false
  }
}
// 以滑动条滚动事件为例
window.addEventListener('scroll', throttle(function(){
  console.log('hello world!')
}, 500))