js防抖、节流_js 电梯门防抖-优快云博客

本文链接：https://blog.youkuaiyun.com/www_wjg/article/details/124272007

本文深入探讨JavaScript中的防抖(debounce)和节流(throttle)技术，用于优化高频率触发的函数执行。防抖能确保在一系列操作后仅执行最后一次，而节流则保证在固定时间间隔内执行一次。这两种方法常应用于输入搜索、页面滚动、鼠标移动和按钮点击等场景，以避免性能问题。文中提供了不同实现方式，并对比了两者的区别和作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、防抖

原理：当持续触发一个事件时，在n秒内，事件没有再次触发，此时才会执行回调；如果n秒内，又触发了事件，就重新进行计时。

理解：在你坐电梯时，当一直有人进电梯（连续触发），电梯门不会关闭，在一定时间间隔内没有人进入（停止连续触发）才会关闭。

使用场景：

输入框搜索内容，发送请求
频繁点击按钮，出发事件
监听浏览器滚动事件，完成某个特定的操作
用户缩放浏览器的resize事件

//1.基本实现
function debounce(fun, delay = 500){
  // 定义一个定时器，保存上一次的时间
  let timer = null
  //真正执行的函数
  const _debounce = function(){
    // 取消上一次的定时器
    if(timer) clearTimeout(timer)
    // 延时执行
    timer = setTimeout(() => {
      // 外部传入的要执行的函数
      fun()
    },delay)
  }
  return _debounce
}

//2.this问题
function debounce1(fun, delay = 500){
  // 定义一个定时器，保存上一次的时间
  let timer = null
  const _debounce = function(...args){
    // 上一次的定时器存在，取消
    if(timer) clearTimeout(timer)
    // 延时执行
    timer = setTimeout(() => {
      // 外部传入的要执行的函数
      fun.apply(this, args)
    },delay)
  }
  return _debounce
}

//3.是否立即执行
function debounce(fun, delay = 500,immediate = false){
  // 定义一个定时器，保存上一次的时间
  let timer = null
  let isInvoke = false
  const _debounce = function(...args){
    // 存在定时器，取消定时器
    if(timer) clearTimeout(timer)
    // 是否立即执行
    if(immediate && !isInvoke){
      fun.apply(this, args)
      isInvoke = true
    }else{
      // 延时执行
      timer = setTimeout(() => {
        // 外部传入的要执行的函数
        fun.apply(this, args)
        isInvoke = false
      },delay)
    }
  }
  return _debounce
}

//4.添加取消
function debounce(fun, delay = 500,immediate = false){
  // 定义一个定时器，保存上一次的时间
  let timer = null
  let isInvoke = false
  const _debounce = function(...args){
    // 存在定时器，取消定时器
    if(timer) clearTimeout(timer)
    // 是否立即执行
    if(immediate && !isInvoke){
      fun.apply(this, args)
      isInvoke = true
    }else{
      // 延时执行
      timer = setTimeout(() => {
        // 外部传入的要执行的函数
        fun.apply(this, args)
        isInvoke = false
      },delay)
    }
  }
  // 取消
  _debounce.cancel = function() {
    if(timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }
  return _debounce
}

二、节流

原理：函数节流（throttle）是指连续触发事件,但是在n秒中只执行一次.

理解：

使用场景：

监听页面滚动事件
鼠标移动事件
用户频繁点击按钮事件

// 1.基本实现
function throttle (fn, interval){
  let lastTime = 0
  const _throttle = function(){
    const newTime = new Date().getTime()
    const remainTime = interval - ( newTime - lastTime)
    if(remainTime<=0){
      fn()
      lastTime = newTime
    }
  }
  return _throttle
}

// 2.this
function throttle1 (fn, interval){
  let lastTime = 0
  const _throttle = function(...args){
    const newTime = new Date().getTime()
    const remainTime = interval - ( newTime - lastTime)
    if(remainTime<=0){
      fun.apply(this, args)
      lastTime = newTime
    }
  }
  return _throttle
}

三、防抖和节流的区别、作用