JS函数节流与防抖原理及实现

作者：函数茶馆时间：2026-10-22 09:20:03浏览：563

本文详解JavaScript中函数节流（throttle）与函数防抖（debounce）的核心原理与应用场景。通过对比窗口滚动、实时搜索等高频事件处理案例，解析基于原生JS与underscore库的实现逻辑，帮助开发者理解如何通过延时策略优化DOM操作与资源加载，提升前端页面性能。

前端高频事件处理挑战

在前端开发过程中，某些用户行为会高频触发事件执行。针对DOM操作、资源加载等耗时处理，若不加控制极易导致界面卡顿甚至浏览器崩溃。函数节流（throttle）与函数防抖（debounce）正是为解决此类性能问题而设计的两种常见策略。

函数节流原理与应用

函数节流（throttle）

函数节流的核心机制是：确保函数在大于等于指定的执行周期时才执行一次，而在周期内的其他调用将被忽略。其工作原理类似于水滴积累到一定重量后才会落下。

典型应用场景包括：

窗口大小调整（resize）
页面滚动事件（scroll）
抢购等高频点击场景（mousedown）

具体实现方式如下：


function throttle(method, delay){
  var last = 0;
  return function (){
    var now = +new Date();
    if(now - last > delay){
      method.apply(this,arguments);
      last = now;
    }
  }
}

document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

基于underscore库的实现方式：


_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    //计算剩余时间
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

函数防抖原理与应用

函数防抖（debounce）

函数防抖适用于需要频繁触发的场景，其逻辑为：只有当函数在足够长的空闲时间内未被再次触发时，才执行最后一次调用。这类似于公交司机等待所有乘客上车后才发车。

典型应用场景包括：

实时搜索输入（keyup）
鼠标拖拽操作（mousemove）

具体实现方式如下：


function debounce(method, delay){
  var timer = null;
  return function(){
    var context = this,args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
      method.apply(context, args);
    },delay);
  }
}

document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

基于underscore库的实现方式：


_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;
  var later = function() {
    var last = _.now() - timestamp;
    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };
  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }
    return result;
  };
};

总结与选型建议

函数节流与函数防抖均通过延时逻辑操作来提升性能，是前端优化中常见且重要的技术手段。开发者应从概念与实际应用层面理解两者的区别，并根据具体需求选择合适的方法进行处理。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09

JS使用constructor判断数据类型可靠吗

2026-11-05 13:49:41