（手把手学会系列）--函数的节流和防抖

（手把手学会系列）–函数的节流和防抖

下面是上的是封装好的函数节流和防抖，可以直接拿去使用,更进一步的解说，再后期的更文中还会提到

函数节流

在函数需要频繁触发时候:函数执行一次后,只有大于设定的执行周期后才会执行
第二次,适合多次事件按时间做平均分配触发

• 场景：
  • 窗口调用(resize)
  • 页面滚动(scroll)
  • DOM元素的拖拽,muonsemove
  • 抢购疯狂点击,mounsedown
• 案例代码

  // 节流的函数
  function throttle(callback, time) {
    // 保证第一次事件必然调用回调
    let start = 0
    return function (...args) {
      console.log('throttle 事件')
      // 当前时间
      const current = Date.now()
      // 满足条件才调用
      if (current - start > time) {
        // 准备调用之前 当前时间保存到start
        start = current
        callback.apply(this, args)
      }
    }
  }
  function handleClick(event) {
    console.log('处理点击事件')
  }
  document.getElementById('throttle').onclick = throttle(handleClick, 2000)
  

函数的防抖

在函数需要频繁触发时候:在规定时间内,只让最后一次生效,前面不生效,适合多次事件一次响应的情况

• 场景
  • 实时搜索联想(keyup)
  • 文本框输入验证(连续输入文字后发送ajax请求进行验证,验证一次就可以了)
• 案例代码

  // 防抖函数
  function debounce(callback, time) {
    return function (...args) {
      console.log('debounce事件')
      // 清除上一次未完成的定时器
      if (callback.timeId) {
        clearTimeout(callback.timeId)
      }
      callback.timeId = setTimeout(() => {
        // 删除保存的定时器id标识
        delete callback.timeId
        // 延迟调用
        callback.apply(this, args)
      }, time);
    }
  }
  // 防抖函数
  function handleClick(event) {
    console.log('处理点击事件')
  }
  document.getElementById('debounce').onclick = debounce(handleClick, 2000)
  

未完待续…