防抖和截流超级详细讲解，易懂

防抖函数：  在规定时间内只执行最后一次

代码解析：

// 1、定义一个业务处理函数
function search() {
  console.log('业务处理函数执行,执行搜索', Math.random())
}





// 2、防抖函数（事件触发每次都执行防抖函数，但是不一定执行业务处理函数）
// 2.1 防抖函数设置1秒延迟执行业务函数
function fangdou () {
  setTimeout(search, 1000)
}




// 2.2、每次事件发生都要触发防抖函数，所以防抖函数需要清除上次的触发
function fangdou () {
  let timer = null
  clearTimeout(timer)
  let timer = setTimeout(search, 1000)
}
// 2.3、问题是，我这个防抖函数每次执行，这个timer都是新的，无法实现我想要的清除上一次的触发。
function fangdou () {
  // timer 定义在哪里？
  let timer = null
  clearTimeout(timer)
  let timer = setTimeout(search, 1000)
}





// 2.4、关键点：这个timer如何维护？
// 如果维护在fangdou函数内部，则每次fangdou函数执行（创建函数执行上下文），timer都是一个新的变量，则无法完成清除的逻辑操作
// 需求：函数在第一次执行时就创建好这个timer，下次（以后）执行时一直都用这个“旧”的，这样就可以完成每次清除的逻辑了。
// 实现这个需求就是使用闭包，在防抖函数外部继续包一个函数，叫防抖生成函数，在这个函数内定义timer，并且返回防抖函数。
// 这样在防抖函数第一次创建的时候内部就有了timer变量。并且每次执行都是访问这个变量。不是创建新的变量。

// 防抖生成函数
function debounce() {
  let timer = null
  return function fangdou () {
      clearTimeout(timer)
	    timer = setTimeout(search, 1000)
  }
}
const foudou = debounce()
window.addEventListener('scroll', foudou);







// 确认防抖函数在每次滑动时都会执行
function search() {
  console.log('业务处理函数执行,执行搜索', Math.random())
}
function debounce() {
  let timer = null
  return function () {
      console.log('防抖函数执行')
      clearTimeout(timer)
	    timer = setTimeout(search, 1000)
  }
}
const foudou = debounce()
window.addEventListener('scroll', foudou);








// 打印每次执行的防抖函数时内部都是清除旧的timer
// 同时生成新的timer
function search() {
  console.log('业务处理函数执行,执行搜索', Math.random())
}

function debounce() {
  let timer = null
  return function () {
      console.log('防抖函数执行，清除旧的', timer)
      clearTimeout(timer)
	    timer = setTimeout(search, 1000)
      console.log('防抖函数执行，生成新的', timer)
  }
}
const foudou = debounce()
window.addEventListener('scroll', foudou);







// 代码优化
// 防抖函数
const debounce = (cb, ms) => {
    let timer = null
    return () => {
        console.log('事件触发，防抖函数执行')
        clearTimeout(timer)
        timer = setTimeout(() => cb(), ms)
    }
}

// 回调函数 
function search() {            
    console.log('业务函数执行，执行搜索', Math.random());        
}
const fangdou = debounce(search, 1000)
window.addEventListener('scroll', fangdou);

截流函数：在规定时间内只执行一次

代码解析：

// 截流函数生成（创建）函数
function throttle(cb,delay){
    let valid = true // 给截流函数生成闭包用
    return function() {
       // 第一次执行，肯定通过。
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
        // 一旦开始执行，后边的就不再接待
        valid = false
        setTimeout(() => {
            cb()
            // 此次执行完毕，准备下次执行
            valid = true;
        }, delay)
    }
}

// 业务处理函数函数 
function putonggongji() {            
    console.log('普通公鸡',Math.random());        
}
// 截流函数
const jieliu = throttle(putonggongji, 1000)

window.addEventListener('scroll', jieliu);