React中如何实现onClick函数等待前一次调用结束后再响应新点击

这是一个很典型的异步操作并发控制问题，核心就是要避免在异步流程未完成时重复触发操作。下面给你一套清晰的解决方案：

核心思路 #

通过一个状态变量标记当前是否正在执行操作，点击时先检查这个状态：如果正在处理就直接忽略新的点击；如果没有处理，就先锁定状态，然后按顺序执行resetViews和异步的chargeViews，等所有操作完成后再解锁状态，允许下一次点击。

修改后的完整代码示例 #

import { useState, useRef } from 'react';

// 假设你的组件其他逻辑已经存在
const YourComponent = () => {
  const viewsRef = useRef(null);
  // 添加一个状态来标记是否正在处理点击操作
  const [isProcessing, setIsProcessing] = useState(false);

  const resetViews = () => {
    if (viewsRef.current) {
      // 你的原有逻辑
      viewsRef.current = null;
    }
  };

  // 把chargeViews改成async函数，用await替代then链，让异步流程更清晰
  const chargeViews = async () => {
    if (!viewsRef.current) {
      await reader.setUrl(url);
      await reader.loadData();
      viewsRef.current = reader.getData();
    }
  };

  // 封装点击处理函数，用async/await控制流程
  const handleClick = async () => {
    // 如果正在处理，直接返回，忽略新的点击
    if (isProcessing) return;
    
    // 锁定操作，标记为正在处理
    setIsProcessing(true);

    try {
      // 按顺序执行resetViews和chargeViews
      resetViews();
      await chargeViews();
    } catch (error) {
      // 可以在这里处理异步操作可能出现的错误
      console.error('加载视图失败:', error);
    } finally {
      // 不管成功还是失败，都要解锁操作
      setIsProcessing(false);
    }
  };

  return (
    <MyButton 
      onClick={handleClick} 
      disabled={isProcessing} // UI层面也禁用按钮，给用户明确反馈
    > 
      {isProcessing ? '加载中...' : 'Click me'} 
    </MyButton>
  );
};

关键细节解释 #

1. isProcessing状态：用来追踪当前是否有操作在执行，点击时先判断这个状态，避免重复触发。
2. chargeViews改为async函数：原来的then链可以用await重构，这样外部的handleClick能准确等待整个异步流程完成，确保操作顺序和锁定时机正确。
3. try/catch/finally：确保即使异步操作出错，也能解锁按钮，避免按钮一直处于禁用状态。
4. 按钮的disabled属性：不仅在逻辑上锁定，还在UI层面给用户反馈（比如显示“加载中...”），提升用户体验。

如果你不想修改chargeViews的结构 #

如果因为某些原因不想把chargeViews改成async函数，也可以保留原来的then链，但要确保它返回Promise，这样handleClick里的await能正常等待：

const chargeViews = () => {
  if (!viewsRef.current) {
    return reader.setUrl(url)
      .then(() => reader.loadData())
      .then(() => {
        viewsRef.current = reader.getData();
      });
  }
  // 如果不需要执行异步操作，返回一个resolved的Promise
  return Promise.resolve();
};

这样修改后，不管用户怎么快速点击按钮，都会严格按照「锁定→执行reset→执行异步charge→解锁」的流程来，完全避免你遇到的“一次reset，两次charge”的问题。

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