如何在两个Input Signal均有值时仅执行一次函数？

方法1：带执行标记的Effect（最直接） #

不用手动销毁Effect，而是在Effect内部加个已执行标记，只有当两个Signal都有值且标记没触发过的时候，才发起请求，请求完把标记设为true就行。

示例代码（以SolidJS为例）：

import { createEffect, createSignal } from "solid-js";
import { fetchData } from "./api";

const Component = () => {
  const [input1, setInput1] = createSignal<string | undefined>();
  const [input2, setInput2] = createSignal<string | undefined>();
  const [requestSent, setRequestSent] = createSignal(false);

  createEffect(() => {
    const val1 = input1();
    const val2 = input2();
    // 两个值都存在，且还没发过请求
    if (val1 && val2 && !requestSent()) {
      fetchData(val1, val2);
      setRequestSent(true);
    }
  });

  // 组件模板...
};

这种方式不用操心Effect销毁，标记设为true后，后续Signal再变也不会触发请求，逻辑简单直白。

方法2：一次性订阅组合信号 #

有些框架（比如Preact Signals）支持对组合后的Signal做一次性订阅，触发请求后直接取消订阅：

import { signal, computed, effect } from "@preact/signals";

const input1 = signal<string | undefined>();
const input2 = signal<string | undefined>();
const bothHaveValue = computed(() => input1.value && input2.value);

// 只监听一次组合信号变为true的时刻
const unsubscribe = effect(() => {
  if (bothHaveValue.value) {
    fetchData(input1.value!, input2.value!);
    unsubscribe(); // 触发后立刻取消订阅
  }
});

这种方式少了一个状态标记，但需要手动管理订阅的取消，适合不需要保留Effect的场景。

方法3：结合框架生命周期与响应式工具（如RxJS） #

如果是Angular这类框架，结合RxJS的操作符能更优雅地实现：

// Angular示例
@Component({
  selector: 'app-my-component',
  template: `...`
})
export class MyComponent implements OnInit, OnDestroy {
  input1 = signal<string | undefined>(undefined);
  input2 = signal<string | undefined>(undefined);
  private destroy$ = new Subject<void>();

  ngOnInit() {
    combineLatest([this.input1, this.input2])
      .pipe(
        filter(([val1, val2]) => !!val1 && !!val2),
        take(1), // 只取第一个满足条件的结果，自动完成订阅
        takeUntil(this.destroy$)
      )
      .subscribe(([val1, val2]) => {
        this.fetchData(val1!, val2!);
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

用take(1)可以自动终止订阅，不用手动加标记，符合这类框架的生态习惯。

总结：优先选方法1，逻辑简单还不会有内存泄漏风险；如果框架支持一次性订阅，方法2也可行；Angular这类用RxJS的场景，方法3更顺手。不建议随便手动销毁Effect，容易漏处理导致内存问题，用标记或take(1)这类方式更稳妥。

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