JavaScript防抖与节流的核心区别及实战场景解析

前言

在前端开发过程中，防抖（Debounce）和节流（Throttle）是两个至关重要的概念，也是面试中常被提及的技术点。

• 它们之间的核心区别是什么？
• 各自适用于哪些具体的业务场景？

ps：这确实是高频出现的面试题！

防抖机制

什么是防抖？

形象地理解，防抖就是“防止抖动”。其核心逻辑是：只有当高频事件停止触发后，经过一段指定的时间，才会执行回调函数。

例如

以搜索输入框为例，用户持续输入时处于“抖动”状态，此时不执行搜索；只有当用户停止输入并等待指定时间后，才触发搜索请求。

代码演示

function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

节流机制

节流的核心在于“节省资源”，即限制函数的执行频率。

形象地说，就是“No! No! No!”，必须按时间节奏依次执行，禁止插队。

例如

在drag（拖动）或scroll（滚动）事件中触发某些逻辑时，需要设置时间间隔。此时若使用防抖并不合适。

因为防抖会在操作结束后才执行回调，而我们需要的是在操作过程中持续触发，但又不希望过于频繁。因此，应使用节流函数，确保每隔一定时间执行一次。

代码演示

// 节流函数
function throttle(fn, delay = 200) {
  let  timer = 0
  return function () {
    if(timer){
      return
    }
    timer.setTimeout(() =>{
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

乍看之下，防抖和节流的代码实现似乎非常相似。

两者的核心区别在于：

防抖的处理逻辑：

 if(timer){
  clearTimeout(timer)
}

节流的 handling 逻辑：

if(timer){
  return
}

它们的主要差异体现在定时器已有任务时的处理方式上。前文已介绍概念，此处从代码层面进一步解析。

防抖函数在每次触发时都清除之前的定时器，目的是确保最终执行的回调是规定时间内最后一次触发的操作。

 if(timer){
  clearTimeout(timer)
}

节流函数则通过判断定时器状态来决定是否执行，目的是保证在规定的时间内，该操作只执行一次。这就是两者在代码实现上的本质区别。

if(timer){
  return
}

到此，关于JavaScript中防抖和节流的区别及适用场景的介绍就结束了。如需了解更多JS防抖和节流相关内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！