防抖和节流

什么是防抖、节流

• 防抖：每次触发都重新计时，直到指定时间结束都没有重新触发，执行的最后一次操作生效

  类似于回城，直到指定时间倒数完，期间没有被打断，才能完成回城这个目标

• 节流：在指定时间内，多次触发，只执行第一次

  类似于回城，直到指定时间倒数完，期间没有被打断，才能完成回城这个目标

防抖和节流的使用场景

• 防抖：搜索联想触发，手机号邮箱的格式验证
• 节流：高频点击按键，下拉自动刷新

手写防抖、节流

• 防抖

// 需要防抖的业务逻辑
function clickLast() {
  console.log('添加功能')
}

function debounce(fn,delay) {
  let timer
  return function() {
    //再次点击则重新计时
    clearTime(timer)
    setTimeout (() => {
     // 调用逻辑处理函数
     // 修正this的指向问题
     fn.apply(this)
    },delay)
  } 
 }
 
 // 使用防抖函数
 addBtn.addEventListener('click',debounce(clickLast,2000))

• 节流

// 需要节流的业务逻辑
function clickFirst() {
  console.log('添加功能')
}

function throttle(fn,delay) {
  // 设置初始时间
  let timer = 0
  return function() {
    // 获取现在的时间
    let timeNow = Date.now()
    // 如果距离上次触发时间大于指定时间，则执行对应函数回调
    if(timeNow - timer > delay) {
      // 调用逻辑处理函数
      // 修正this的指向问题
      fn.apply(this)
      timer = timeNow
    }
  } 
 }
 
 // 使用节流函数
 addBtn.addEventListener('click',debounce(clickFirst,2000))

为什么要修正this的指向问题

• 当函数被防抖或节流时，该函数会被多次调用，每次调用时的 this 关键字的值都可能不同。如果直接使用 this 关键字，可能会导致函数的行为不一致，因此需要对其进行修正。