函数节流和防抖简单实现

最新推荐文章于 2025-07-01 14:08:55 发布

原创最新推荐文章于 2025-07-01 14:08:55 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍JavaScript中实现函数防抖(debounce)与节流(throttle)的方法，通过简单的代码示例解释如何控制函数调用频率，适用于网页交互优化等场景。

//等delay时间执行一次
function debounce(fn, delay){
  let timer = null;
  return function(){
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  }
}

//每隔delay执行一次
var throttle = 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();
      }
  }
}