RxJS debounceTime本地正常，生产构建后不符合预期问题咨询

这问题我之前在项目里也碰到过，简直挠头！核心原因其实是生产模式下的优化和distinctUntilChanged的默认比较逻辑冲突了，咱们一步步来搞定：

问题根源 #

1. distinctUntilChanged的浅比较坑：
   distinctUntilChanged默认用===做浅比较，但Angular表单的valueChanges每次发出的都是全新的对象引用——哪怕表单值根本没变化。本地开发时因为优化没拉满，可能没暴露这个问题，但prod构建开启AOT和严格优化后，这个差异就会直接导致每次输入都被判定为“新值”，跳过了过滤逻辑。
2. 可能的笔误：
   你代码里写的debounceTime(100000)是100秒哦！如果本地是10秒正常，大概率是手滑多打了个0，改成10000才是10秒的延迟。

解决方案 #

方案1：用深比较函数（推荐用lodash的isEqual） #

lodash的isEqual能完美处理对象的深比较，直接拿来用就行：

import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { isEqual } from 'lodash';

// 你的组件代码里
this.form.valueChanges
  .pipe(
    debounceTime(10000), // 修正为10秒
    distinctUntilChanged((prevValue, currValue) => isEqual(prevValue, currValue))
  )
  .subscribe(() => {
    // 你的回调逻辑
  });

方案2：自己实现深比较（不想加依赖的话） #

如果不想引入lodash，写个简单的深比较函数也能搞定：

import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

// 自定义深比较函数
const deepCompareFormValues = (prev: any, curr: any): boolean => {
  // 先判断引用是否相同
  if (prev === curr) return true;
  // 非对象直接返回false
  if (typeof prev !== 'object' || prev === null || typeof curr !== 'object' || curr === null) {
    return false;
  }
  // 对比所有键值对
  const prevKeys = Object.keys(prev);
  const currKeys = Object.keys(curr);
  if (prevKeys.length !== currKeys.length) return false;
  
  for (const key of prevKeys) {
    if (!currKeys.includes(key) || !deepCompareFormValues(prev[key], curr[key])) {
      return false;
    }
  }
  return true;
};

// 组件里使用
this.form.valueChanges
  .pipe(
    debounceTime(10000),
    distinctUntilChanged(deepCompareFormValues)
  )
  .subscribe(() => {
    // 你的回调逻辑
  });

额外说明 #

prod构建下Angular会做很多性能优化，比如对象的不可变性处理，这会让表单每次值变更都生成新对象，所以必须用深比较来判断“值是否真的变化”，而不是依赖对象引用的比较。调整之后，debounceTime和distinctUntilChanged就能正常工作啦！

内容的提问来源于stack exchange，提问作者user3003749