如何在任意时机终止JavaScript函数，避免全局状态竞态条件？

你的核心需求是在用户点击按钮时，让之前调用的mutateState里的异步逻辑彻底失效，不再修改全局状态。因为原函数里的setTimeout已经执行，真正要阻止的是它的回调函数，所以我们可以通过管理异步任务的引用来实现，不用在每个状态修改前加if判断。

Vue 3 组合式API实现 #

<script setup>
import { ref } from 'vue'

let globalState = ref(0)
// 用ref存储定时器ID，跨调用共享引用
let timerId = ref(null)

const mutateState = () => {
  // 先清除之前的定时器，直接阻止旧回调执行
  if (timerId.value) {
    clearTimeout(timerId.value)
  }
  // 记录新的定时器ID
  timerId.value = setTimeout(() => {
    globalState.value = Math.random()
  }, Math.random() * 1000)
}
</script>

<template>
  <button @click="mutateState">修改状态</button>
</template>

Vue 2/选项式API实现 #

<script>
export default {
  data() {
    return {
      globalState: 0,
      timerId: null
    }
  },
  methods: {
    mutateState() {
      // 清除上一次的定时器
      if (this.timerId) {
        clearTimeout(this.timerId)
      }
      this.timerId = setTimeout(() => {
        this.globalState = Math.random()
      }, Math.random() * 1000)
    }
  }
}
</script>

<template>
  <button @click="mutateState">修改状态</button>
</template>

扩展：处理API请求等复杂异步操作 #

如果你的实际场景里有API请求这类Promise异步操作，可以用AbortController来取消请求，原理和定时器一致：

<script setup>
import { ref } from 'vue'

let globalState = ref(0)
let abortController = ref(null)

const mutateState = async () => {
  // 取消之前未完成的请求
  if (abortController.value) {
    abortController.value.abort()
  }
  abortController.value = new AbortController()
  
  try {
    // 模拟API请求，传入signal用于取消
    const response = await fetch('/api/get-data', {
      signal: abortController.value.signal
    })
    const data = await response.json()
    globalState.value = data
  } catch (err) {
    // 忽略取消请求的错误，只处理其他异常
    if (err.name !== 'AbortError') {
      console.error('请求出错:', err)
    }
  }
}
</script>

为什么这个方案符合你的需求？ #

这种方式是从异步任务的根源进行拦截，不管你的函数里有多少变量修改、多少操作步骤，只要异步任务（定时器/请求）被取消，后续的所有逻辑都不会执行，完全不用逐个加if判断，实现了你“完全终止函数效果”的需求。

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