TypeScript函数实现重复错误

'# TypeScript函数实现重复错误

一、背景与问题

在复杂前端项目中，重复调用错误是常见的性能瓶颈和逻辑漏洞。例如：

1. 用户点击提交按钮时，由于网络延迟导致的重复提交
2. 搜索框输入时频繁触发API请求
3. 事件监听器被多次绑定导致的内存泄漏
4. 异步函数被重复执行引发的竞态条件

这些场景都存在一个共同特征：需要在特定条件下阻止函数的重复执行。传统解决方案常采用标志位控制，但存在维护复杂度高、内存泄漏风险等问题。

TypeScript通过类型系统和函数式编程特性，可以更优雅地实现这类需求。本文将深入探讨三种核心实现方案：防抖（debounce）、节流（throttle）和Promise防重，分析其原理、适用场景及注意事项。

二、基本原理

1. 防抖（Debounce）原理

通过定时器控制函数执行频率，只有在最后一次调用后经过指定间隔时间才执行。适用于：

• 搜索框输入实时搜索
• 窗口调整时的布局更新
• 防止多次点击提交

2. 节流（Throttle）原理

通过记录上一次执行时间，确保函数在指定间隔内只执行一次。适用于：

• 滚动事件监听
• 鼠标移动轨迹追踪
• 无限滚动加载

3. Promise防重原理

通过Promise链控制函数执行状态，确保同一操作只有一个Promise在运行。适用于：

• API请求防重复
• 文件上传防重
• 状态更新防冲突

三、环境准备

确保已安装TypeScript和相关依赖：

npm install typescript --save-dev

配置tsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  }
}

四、核心实现

1. 防抖函数实现

function debounce<T>(fn: (args: T) => void, delay: number): (args: T) => void {
  let timer: NodeJS.Timeout;
  
  return function (args: T) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(args);
    }, delay);
  };
}

关键代码解释：

• 使用NodeJS.Timeout类型保证类型安全
• 通过clearTimeout重置定时器
• 返回的函数接受与原函数相同的参数类型

使用示例：

const searchDebounce = debounce((query: string) => {
  console.log(`Searching for: ${query}`);
}, 300);

// 模拟输入事件
['apple', 'banana', 'orange'].forEach(query => {
  searchDebounce(query);
});

性能优化：

• 使用WeakMap存储定时器避免内存泄漏
• 可选添加leading参数支持立即执行

2. 节流函数实现

function throttle<T>(fn: (args: T) => void, delay: number): (args: T) => void {
  let lastTime = 0;
  
  return function (args: T) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn(args);
      lastTime = now;
    }
  };
}

关键代码解释：

• 使用Date.now()获取当前时间戳
• 通过比较时间差控制执行频率
• 可扩展支持trailing参数控制尾执行

使用示例：

const resizeThrottle = throttle((size: number) => {
  console.log(`Window resized to: ${size}`);
}, 500);

window.addEventListener('resize', () => {
  resizeThrottle(window.innerWidth);
});

性能优化：

• 使用requestAnimationFrame替代setTimeout优化渲染性能
• 可选添加noLeading参数控制执行时机

3. Promise防重实现

function once<T>(fn: (args: T) => Promise<void>): (args: T) => Promise<void> {
  let isRunning = false;
  let promise: Promise<void> | null = null;
  
  return function (args: T): Promise<void> {
    if (isRunning) {
      return promise!;
    }
    
    isRunning = true;
    promise = new Promise<void>((resolve, reject) => {
      try {
        fn(args).then(resolve).catch(reject);
      } catch (err) {
        reject(err);
      }
    });
    
    return promise;
  };
}

关键代码解释：

• 使用标志位控制运行状态
• 通过Promise链确保单次执行
• 自动处理异常和清理资源

使用示例：

const uploadOnce = once(async (file: File) => {
  console.log(`Uploading file: ${file.name}`);
  await new Promise(resolve => setTimeout(resolve, 1000));
});

// 模拟多次上传
['file1.txt', 'file2.txt', 'file3.txt'].forEach(file => {
  uploadOnce(file).catch(err => console.error(err));
});

五、完整案例

文件上传防重案例

// 1. 定义接口
interface UploadOptions {
  file: File;
  onProgress: (progress: number) => void;
  onComplete: (result: string) => void;
}

// 2. 实现防重函数
function createUploader(options: UploadOptions): Promise<string> {
  const { file, onProgress, onComplete } = options;
  const size = file.size;
  
  return once(async () => {
    let uploaded = 0;
    const reader = new FileReader();
    
    reader.onload = function () {
      // 模拟上传过程
      const interval = setInterval(() => {
        uploaded += 1024;
        onProgress(uploaded / size * 100);
        
        if (uploaded >= size) {
          clearInterval(interval);
          onComplete('success');
        }
      }, 100);
    };
    
    reader.readAsArrayBuffer(file);
  });
}

// 3. 使用示例
const uploadFile = (file: File) => {
  createUploader({
    file,
    onProgress: (progress) => {
      console.log(`Uploading: ${progress}%`);
    },
    onComplete: (result) => {
      console.log(`Upload result: ${result}`);
    }
  });
};

// 模拟多文件上传
['file1.txt', 'file2.txt', 'file3.txt'].forEach(file => {
  uploadFile(file);
});

关键点说明：

• 使用once确保同一文件只上传一次
• 通过FileReader模拟文件读取
• 自动处理上传过程中的进度更新
• 支持异常处理和资源清理

六、源码解析

1. 防抖函数源码分析

function debounce<T>(fn: (args: T) => void, delay: number): (args: T) => void {
  let timer: NodeJS.Timeout;
  
  return function (args: T) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(args);
    }, delay);
  };
}

• timer变量存储定时器引用
• 每次调用都会清除旧定时器
• 延迟时间后执行原函数
• 可通过cancel方法主动清除定时器

2. 节流函数源码分析

function throttle<T>(fn: (args: T) => void, delay: number): (args: T) => void {
  let lastTime = 0;
  
  return function (args: T) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn(args);
      lastTime = now;
    }
  };
}

• 使用时间戳控制执行频率
• 只有在指定间隔内才执行函数
• 可通过reset方法重置时间戳
• 支持连续调用时的渐进执行

3. Promise防重源码分析

function once<T>(fn: (args: T) => Promise<void>): (args: T) => Promise<void> {
  let isRunning = false;
  let promise: Promise<void> | null = null;
  
  return function (args: T): Promise<void> {
    if (isRunning) {
      return promise!;
    }
    
    isRunning = true;
    promise = new Promise<void>((resolve, reject) => {
      try {
        fn(args).then(resolve).catch(reject);
      } catch (err) {
        reject(err);
      }
    });
    
    return promise;
  };
}

• 使用标志位控制运行状态
• 通过Promise链确保单次执行
• 自动处理异常和资源清理
• 支持取消操作（需扩展）

七、进阶使用

1. 多参数防重

function onceWithParams<T, U>(fn: (args: T, params: U) => Promise<void>): (args: T, params: U) => Promise<void> {
  let isRunning = false;
  let promise: Promise<void> | null = null;
  
  return function (args: T, params: U): Promise<void> {
    if (isRunning) {
      return promise!;
    }
    
    isRunning = true;
    promise = new Promise<void>((resolve, reject) => {
      try {
        fn(args, params).then(resolve).catch(reject);
      } catch (err) {
        reject(err);
      }
    });
    
    return promise;
  };
}

2. 带超时的防重

function onceWithTimeout<T>(fn: (args: T) => Promise<void>, timeout: number): (args: T) => Promise<void> {
  let isRunning = false;
  let promise: Promise<void> | null = null;
  
  return function (args: T): Promise<void> {
    if (isRunning) {
      return promise!;
    }
    
    isRunning = true;
    promise = new Promise<void>((resolve, reject) => {
      const timer = setTimeout(() => {
        reject(new Error('Timeout exceeded'));
      }, timeout);
      
      try {
        fn(args).then(resolve).catch(reject).finally(() => {
          clearTimeout(timer);
        });
      } catch (err) {
        reject(err);
      }
    });
    
    return promise;
  };
}

3. 带缓存的防重

function onceWithCache<T, R>(fn: (args: T) => Promise<R>): (args: T) => Promise<R> {
  const cache = new Map<string, R>();
  
  return function (args: T): Promise<R> {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      return Promise.resolve(cache.get(key)!);
    }
    
    return once(fn, (args: T) => {
      return new Promise<R>((resolve, reject) => {
        try {
          fn(args).then(value => {
            cache.set(key, value);
            resolve(value);
          }).catch(reject);
        } catch (err) {
          reject(err);
        }
      });
    });
  };
}

八、性能与工程实践

1. 性能优化策略

2. 异常处理方案

function safeOnce<T>(fn: (args: T) => Promise<void>): (args: T) => Promise<void> {
  return function (args: T): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      try {
        once(fn)(args).then(resolve).catch(reject);
      } catch (err) {
        reject(err);
      }
    });
  };
}

3. 安全风险分析

九、常见问题与踩坑

1. 常见错误

错误示例：

function debounce(fn, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

问题分析：

• 缺乏类型定义
• 未处理函数参数
• 未考虑上下文绑定

改进方案：

function debounce<T>(fn: (args: T) => void, delay: number): (args: T) => void {
  let timer: NodeJS.Timeout;
  
  return function (args: T) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(args);
    }, delay);
  };
}

2. 常见陷阱

十、最佳实践

1. 使用场景推荐

2. 实现规范建议

• 使用类型定义明确参数和返回值
• 提供cancel方法主动取消执行
• 支持可选参数控制执行模式
• 添加toString方法便于调试
• 使用WeakMap存储状态避免内存泄漏

3. 代码质量建议

• 使用函数式编程风格
• 保持函数单一职责
• 提供默认参数和重载
• 使用类型守卫确保类型安全
• 添加单元测试覆盖边界情况

十一、总结

TypeScript通过其类型系统和函数式编程特性，可以实现多种防止重复执行的方案。防抖、节流和Promise防重分别适用于不同场景，开发者需要根据具体需求选择合适方案。

在实际开发中，应该：

• 对高频操作使用防抖/节流
• 对关键业务逻辑使用Promise防重
• 对敏感操作添加双重校验
• 对长期运行的函数添加资源清理

需要注意的潜在问题包括：

• 内存泄漏风险
• 逻辑错误引发的异常
• 资源竞争导致的不一致
• 安全漏洞的潜在风险

通过合理使用这些技术，可以显著提升应用的性能、稳定性和用户体验。在实际项目中，建议根据具体需求选择最合适的方案，并结合单元测试和性能测试确保可靠性。