js防抖与节流函数

最新推荐文章于 2024-04-20 20:33:25 发布

Mingchen Shao

最新推荐文章于 2024-04-20 20:33:25 发布

阅读量108

点赞数 1

分类专栏：工具的使用文章标签： javascript

本文链接：https://blog.youkuaiyun.com/shaoxxxxx/article/details/109714660

版权

工具的使用专栏收录该内容

7 篇文章

订阅专栏

本文介绍了JavaScript中的防抖(debounce)和节流(throttle)函数，它们在处理高频率事件触发时，通过延迟执行或限制执行频率来优化性能，常用于响应用户交互和echarts的resize事件。

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

防抖与节流函数

/**
 * 用于防抖，echarts的resize方法。
 * @param {*} func 防抖的函数
 * @param {*} wait 时间间隔
 * @param {*} immediate 
 */
export function debounce(func, wait, immediate) {
    let timeout, args, context, timestamp, result;
    const later = function() {
      // 据上一次触发时间间隔
      const last = +new Date() - timestamp;
  
      // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
      if (last < wait && last > 0) {
        timeout = setTimeout(later, wait - last);
      } else {
        timeout = null;
        // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
        if (!immediate) {
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        }
      }
    };
    return function(...args) {
      context = this;
      timestamp = +new Date();
      const callNow = immediate && !timeout;
      // 如果延时不存在，重新设定延时
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) {
        result = func.apply(context, args);
        context = args = null;
      }
      return result;
    };
  }

/**
 * 节流函数
 * @param method 事件触发的操作
 * @param mustRunDelay 间隔多少毫秒需要触发一次事件
 */
export function throttle(method, mustRunDelay) {
    let timer,
        args = arguments,
        start;
    return function loop() {
        let self = this;
        let now = Date.now();
        if(!start){
            start = now;
        }
        if(timer){
            clearTimeout(timer);
        }
        if(now - start >= mustRunDelay){
            method.apply(self, args);
            start = now;
        }else {
            timer = setTimeout(function () {
                loop.apply(self, args);
            }, 50);
        }
    }
}