throttle含义, 应用场景和原理

最新推荐文章于 2024-01-19 21:47:25 发布

ruby_xc

最新推荐文章于 2024-01-19 21:47:25 发布

阅读量3.9k

点赞数 1

分类专栏：前端学习

前端学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍函数节流(throttle)的概念及其实现方法。通过限制函数的执行频率来防止短时间内多次触发事件导致性能问题。适用于如窗口调整大小(onresize)和滚动(onscroll)等频繁触发的事件。

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

函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用. 只有当上一次函数执行后达到规定的时间间隔, 才能进行下一次调用. 但要保证一个累计最小调用时间间隔(例如拖拽类的节流需要有连续效果)
函数节流用于onresize, onscroll等短时间内会多次触发的事件
函数节流的原理: 使用定时器做时间节流. 当触发一个事件时, 先用setTimeout让这个事件延迟一小段时间在执行. 如果在这个时间间隔内又触发了事件, 就clearTimeout原来的定时器, 在setTimeout一个新的定时器重复以上流程
函数节流简单实现:

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
        method.call(context);
    }, 100);
}

window.onresize = function() {
    throttle(myFunc, window)
}

// 封装
var throttle = function(fn, delay, mustRunDelay){
  var timer = null;
  var t_start;
  return function(){
    var context = this, args = arguments, t_curr = +new Date();
    clearTimeout(timer);
    if(!t_start){
      t_start = t_curr;
    }
    if(t_curr - t_start >= mustRunDelay){
      fn.apply(context, args);
      t_start = t_curr;
    } else {
      timer = setTimeout(function(){
        fn.apply(context, args);
      }, delay);
    }
  };
};

// 调用（两次间隔50ms内连续触发不执行，但每累计100ms至少执行一次
window.onresize = throttle(myFunc, 50, 100);