制作一个单击功能等待上一个通话结束

Question

我正在与React合作，并且我有问题连续同步点击（ONCLICK EVENT）：

我的按钮触发了一个调用两个函数的函数resetViews and code> code> choce> carriceviews （> ChargeViews需要时间），因此，当我快速单击两次时：

• resetView被罚款（它将views> views> views> views> views> views> current null），
• 然后code> code> codeviews < /code>被调用，但是由于花费时间，因此不会在此之后更新viewsref.current。
• 因此resetView被调用，但是viewsRef.current仍然是null（因为chode> charderviews尚未对其进行更新），因此它无能为力，
• 那么我获取两个延迟执行curophiws ，
• 因此两次单击后，我获得了1个执行resetView和两个延迟执行chode> carriceviews

我想要的是，我想要的是在单击，单击后，阻止所有内容（即使用户单击我们什么都不做），并执行resetView然后code> chode> codeviews，然后取消屏蔽以接收另一个单击并执行相同的工作。

<MyButton onClick={() => {
  resetViews();
  chargeViews();
 }}> 
  Click me 
 </MyButton>

如果我单击得这么快，则需要时间的功能

const chargeViews = () => {
  if(!viewsRef.current){
   ...
   reader.setUrl(url).then(()=>{
   reader.loadData().then(()=>{
   ...
   viewsRef.current = reader.getData();
})})
}}

，该功能被忽略了（如果我单击并等待一点，则可以正常单击，然后再单击），但是如果我单击并再次单击快速单击，则它将被忽略。

const resetViews = () => {
  if (viewsRef.current){
   ...
   viewsRef.current = null;
}}

Answer 1

我不完全确定掌握整个问题......如果不需要这么长的文本，这将是一个评论。

无论如何，只要您需要在单击按钮后禁用该按钮，您应该在其 onclick 处理程序的开头处理它：

$(this.event.target).prop('disabled', true);

并在最后重置它：

$(this.event.target).prop('disabled', false);

一般来说，您所做的在调用许多函数方面是正确的在处理程序内的链中执行。但这两个函数似乎有一个承诺调用..在这种情况下，它们不会在链中执行，等待第一个函数完成。

因此，您应该将第二个调用作为第一个调用的回调传递，以便只有在第一个调用完成其工作后才有机会调用它。

我希望有人能直奔主题，建议如何使异步函数“等待”，以便无论它做什么，在调用时都会等待其完成，然后才能评估下一个语句。通常，只需在签名前添加 await 即可，但有一些注意事项。

Answer 2

首先，您需要将您的承诺功能转换为异步功能，然后在调用它们时等待它们。
这将使控制执行顺序更加容易：

const chargeViews = async () => {
  if(!viewsRef.current){
   ...
   await reader.setUrl(url);
   await reader.loadData();
   ...
   viewsRef.current = reader.getData();
  }
}

然后，您需要一个Isexecuting Ref，当其他援引执行时将是正确的，而当当前没有执行时，则需要false：

const isExecuting = useRef(false);

const handleClick = async () => {
  if (!isExecuting.current) {
    // block other clicks from performing actions in parallel
    isExecuting.current = true;
    try {
      resetViews();
      await chargeViews();
    } finally {
      // unblock other clicks
      isExecuting.current = false;
    }
  }
};

最后，使用新创建的handleclick在您的JSX中功能：

<MyButton onClick={handleClick}>
  Click me
</MyButton>