JavaScript防抖与节流函数的实现原理及场景差异

作者：巡夜人时间：2026-10-23 17:25:52浏览：612

本文深入解析JavaScript中防抖（debounce）与节流（throttle）函数的核心区别及实现方式。通过对比定时器模式、时间戳模式及其组合方案，详细阐述两者在处理高频事件时的不同逻辑。文章结合具体代码示例，说明防抖适用于输入框搜索等需等待用户停止操作的场景，而节流更适合滚动加载等需保证固定频率执行的场景，帮助开发者根据实际需求选择合适策略以优化页面性能。

防抖与节流的应用背景

本文通过具体示例，详细解析JavaScript中防抖函数与节流函数的应用场景及其实现原理上的区别，供读者参考学习。

在前端开发中，常遇到如resize、scroll或input等事件被高频触发的情况。这会导致对应的事件处理函数被频繁调用，不仅加重浏览器负担，还影响用户体验。防抖和节流函数正是为了解决这一问题而存在的。

函数防抖（debounce）实现

函数防抖（debounce）：

当事件被持续触发时，若在设定的时间间隔内没有再次触发事件，则调用事件处理函数；若在设定时间内事件再次被触发，则不执行处理函数，并从当前触发时刻重新开始计算延时时间。

具体实现：

设计思路：利用setTimeout调用事件处理函数。如果在定时器触发执行前再次触发事件，则清除之前的定时器，从而重置延时过程。

防抖代码示例


function debounce(fn, timeout){
  timeout = timeout || 1000;
  let timer;
  return () => {
    if(timer){ clearTimeout(timer)}
    timer = setTimeout(() => {
      fn()
    },timeout)
  }
}
 
function printEvent(){
  console.log('1121212')
}
 
window.addEventListener('scroll',debounce(printEvent,1000),false)

函数节流（throttle）实现

函数节流（throttle）[θrɑt(ə)l]：意为油门、节气门或扼杀。

当事件被持续触发时，确保在设定的时间间隔内，事件处理函数只执行一次。

定时器实现模式：定时器在延时时间执行完毕后，将其重置为null。当检测到定时器为null时，重新设置新的定时器，如此循环往复。

节流定时器模式代码


//节流函数
function throttle(fn, range){
  range = range || 1000;
  let timer;
  return () => {
    //console.log(111,typeof timer)
    if(!timer){
      timer = setTimeout( () => {
        fn()
        timer = null
      },range)
    }
  }
}
 
window.addEventListener('mousemove',throttle(printEvent,1000),false)

时间戳实现模式：初始化时获取当前时间，每次触发事件时再次获取当前时间。若两次时间间隔大于或等于设定时间，则执行事件处理函数，并将初始化时间重置为当前时间，如此循环。

节流时间戳模式代码


//节流函数 时间戳模式
var throttle2 = function(func, delay) {
　　var prev = Date.now();
　　return function() {
　　　　var context = this;
　　　　var args = arguments;
　　　　var now = Date.now();
　　　　if (now - prev >= delay) {
　　　　　　func.apply(context, args);
　　　　　　prev = Date.now();
　　　　}
　　}
}

也可以采用时间戳与定时器结合的方式实现节流：