JS中如何基于API返回count实现按钮每次点击依次调用对应函数

我有一个绑定了handleCount()点击事件的按钮，同时定义了function1()、function2()、function3()三个函数。原本的逻辑是根据从API获取的count值在handleCount()中调用对应函数：

• 当count === 0时，调用function1()；
• 当count === 1时，调用function1()和function2()；
• 当count === 2时，调用function1()、function2()和function3()；
  这部分逻辑已正常工作。

现在需要修改逻辑：每次点击按钮时依次调用一个函数。例如当count === 2时，第一次点击调用function1()，第二次点击调用function2()，第三次点击调用function3()。

注：count值来自API，不会自行对其进行增减操作。

示例代码如下：

var count = 2;

const function1 = () => {
  console.log("Function one");
}

const function2 = () => {
  console.log("Function two")
}

const function3 = () => {
  console.log("Function three")
}

const handleCount = () => {
  if (count === 0) {
    function1();
  }
  if (count === 1) {
    function1();
    function2();
  }
  if (count === 2) {
    function1();
    function2();
    function3();
  }
}

return (
  <>
   <button onClick={handleCount}></button>
  </>
)

核心思路是维护一个本地状态记录当前点击进度，每次点击时根据进度调用对应函数，直到完成count值对应的所有函数调用。

方案1：React环境下实现 #

利用useState维护点击索引，避免组件重新渲染时丢失状态：

import { useState } from 'react';

// 假设count从API获取，这里用useState模拟初始值
const [count, setCount] = useState(2);
// 记录当前要调用的函数索引，初始为0
const [clickIndex, setClickIndex] = useState(0);

const function1 = () => {
  console.log("Function one");
}

const function2 = () => {
  console.log("Function two")
}

const function3 = () => {
  console.log("Function three")
}

// 将函数存入数组，通过索引直接调用，简化逻辑
const functionList = [function1, function2, function3];

const handleCount = () => {
  // count值对应的函数总数是count+1（如count=2对应3个函数）
  const totalFunc = count + 1;
  if (clickIndex < totalFunc) {
    // 调用当前索引对应的函数
    functionList[clickIndex]();
    // 更新索引，下次点击调用下一个函数
    setClickIndex(prev => prev + 1);
  } else {
    // 可选逻辑：完成一轮后重置索引，循环调用
    // setClickIndex(0);
    console.log("已完成所有函数调用");
  }
}

return (
  <>
   <button onClick={handleCount}>点击执行</button>
  </>
)

方案2：普通JavaScript环境实现 #

用闭包或全局变量维护点击索引：

var count = 2;
// 记录当前要调用的函数索引
let clickIndex = 0;

const function1 = () => {
  console.log("Function one");
}

const function2 = () => {
  console.log("Function two")
}

const function3 = () => {
  console.log("Function three")
}

const functionList = [function1, function2, function3];

const handleCount = () => {
  const totalFunc = count + 1;
  if (clickIndex < totalFunc) {
    functionList[clickIndex]();
    clickIndex++;
  } else {
    // 可选逻辑：重置索引循环调用
    // clickIndex = 0;
    console.log("已完成所有函数调用");
  }
}

// 绑定按钮点击事件
document.querySelector('button').addEventListener('click', handleCount);

关键逻辑说明 #

1. 函数数组化：把目标函数存入数组，通过索引直接访问，替代繁琐的if/else判断。
2. 进度追踪：新增clickIndex变量记录当前调用进度，每次点击后递增。
3. 边界控制：通过count + 1确定需要调用的函数总数，当进度达到总数时，可选择停止调用或重置进度循环执行。

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