Question

function sendMessage(){

        ...

        if(file){
            sendingMessage = true;
            setTimeout(() => {              
                sendingMessage = false;
                messages = [...messages, chatmessage];
            }, 3800)            
        }
        chatmessage = '';
        inputRef.focus()
        updateScroll();
    }

现在，当调用此函数时，首先将chatmessage设置为空字符串，等等。然后执行超时函数中的代码，这是最核心的行为。但是，有没有一种方法可以使setTimeout同步？

这是我想要的行为：

如果if(file)为true，则设置sendingMessage = true （sendMessage会触发旋转的车轮动画）
等待3.8秒，然后执行超时功能中的内容。
然后，仅将chatmessage设置为空字符串，依此类推（其余代码）

编辑1：我可以将代码移到超时函数中，但是问题是我自己，如果file不存在，则应该一起跳过超时函数。然后，我将不得不编写另一个if块，以检查文件是否不存在以执行相同的命令（重复代码）。解决此问题的另一种方法是将相同的代码放在一个函数中，并在两个地方都调用它，但是感觉它不是理想的方法，而创建一个函数来更改三个变量的值似乎有点过头了。

Answer 1

在执行代码之前，您可以使用Promise等待3秒钟。

要使其正常工作，请创建一个函数，该函数返回一个在3秒后解决的promise。

function wait(seconds) {
   return new Promise(resolve => {
      setTimeout(resolve, seconds * 1000);
   });
}

然后在sendMessage函数内部，调用此函数，并传入您要等待的秒数。当wait函数返回的promise解析后，请在等待时间结束后执行要执行的代码。

下面的代码显示了如何在wait函数内部调用sendMessage函数的示例。

async function sendMessage() {

    ...

    if(file){
        sendingMessage = true;
   
        await wait(3);          // wait for 3 seconds

        sendingMessage = false;
        messages = [...messages, chatmessage];      
    }

    chatmessage = '';
    inputRef.focus()
    updateScroll();
}

Answer 2

您可以在此处使用promise，您的示例很复杂，因此我将展示较小的

function sleep(time) {
  return new Promise(resolve=>setTimeout(resolve, time));
}

async function run() {
  console.log(1);
  await sleep(1000);
  console.log(2);
}

run();

Answer 3

您无法直接实现这一目标。您必须将超时功能包装到promise中，然后在异步功能中等待结果。

let file = true

function asyncTimeout(resolver){
    return new Promise(resolver) 
}

async function sendMessage(){

        console.log("Before setTimeout")

    if(file){
    
      await asyncTimeout((resolve, reject) => {
        setTimeout( function() {
          console.log("Timeout finished!")
          resolve()
        }, 3800) 
      })
         
    }
    
    console.log("After setTimeout")
}


sendMessage()

这是一个小提琴： https://jsfiddle.net/38rwznm6/

等待setTimeout完成，然后继续执行其余代码

3 个答案: