Javascript 在上面键入指示后执行代码

我想不出解决办法。我正在开发聊天机器人。 这是我的html，我在其中打印所有讨论，它只是一个：

<div  id="divChat">  </div>

我想在其上添加键入指示器。以下是它在每条消息上的工作方式：

1） 用户键入他的消息（例如：Hello），然后单击按钮

<button onclick="sendMessage()" id="btn1" > Send </button> 

发送

2） 我阅读了他的消息，并将其发送到mybackend应用程序，以接收响应并将其打印到chat元素中

function sendMessage(){ 
var url = "http://localhost:3000/api/v1/bots/renault/converse/user1";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
        var reponseBot= JSON.parse(xhr.responseText);
    if(reponseBot!='undefined'){
     $("#divChat").append(reponseBot+"</br>");


    }
}
}
};
var values = {
   type: "text"
}
values.text=$("#userMessage").val();
var data=  JSON.stringify(values);
xhr.send(data);
}

函数sendMessage（）{
变量url=”http://localhost:3000/api/v1/bots/renault/converse/user1";
xhr.open（“POST”，url，true）；
setRequestHeader（“内容类型”、“应用程序/json”）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
var reponseBot=JSON.parse（xhr.responseText）；
if（reponseBot！=“未定义”）{
$（“#divChat”）.append（reponseBot+”
”；
}
}
}
};
var值={
键入：“文本”
}
values.text=$（“#userMessage”）.val（）；
var data=JSON.stringify（值）；
发送（数据）；
}

聊天效果很好，现在我想添加输入指示器，就是这个元素（你不需要看到它的css）：

我希望当用户发送消息时，我将键入指示器附加到聊天中，显示2秒，然后隐藏，然后附加，然后响应bot：像这样

if (xhr.readyState === 4 && xhr.status === 200) {
            var reponseBot= JSON.parse(xhr.responseText);
        if(reponseBot!='undefined'){

       $("#divChat").append("<div class='typing-indicator' ></div>");


           /// I WANT TO HIDE IT AFTER 2SEC THEN APPEND THE USER RESPONSE

        $("#divChat").append(reponseBot+"</br>");


        }
    }

if（xhr.readyState==4&&xhr.status==200）{
var reponseBot=JSON.parse（xhr.responseText）；
if（reponseBot！=“未定义”）{
$（“#divChat”）。追加（“”）；
///我想在2秒后隐藏它，然后附加用户响应
$（“#divChat”）.append（reponseBot+”
”；
}
}

---

请了解如何实现这一点，谢谢您可以使用

setTimeout

延迟操作

还要注意，如果您已经在页面中包含了jQuery，那么您也可以使用它的AJAX方法来简化代码。试试这个：

let$divChat=$（'#divChat'）；
函数sendMessage（）{
$.post（$）http://localhost:3000/api/v1/bots/renault/converse/user1', {  
键入：“文本”，
文本：$（'#userMessage'）.val（）
}，功能（回应）{
$（'#userMessage'）.val（''）；//清空键入的消息
让$indicator=$（''）.appendTo（$divChat）；
设置超时（（）=>{
$indicator.remove（）；
$divChat.append（响应+“
”）；
}, 2000);
});
};

还要注意，从对AJAX请求的响应来看，您返回的是一个不理想的纯文本响应，因为它可能会受到空格的影响。我建议您修改服务器端逻辑，以返回序列化格式，如JSON或XML

if (xhr.readyState === 4 && xhr.status === 200) {
            var reponseBot= JSON.parse(xhr.responseText);
        if(reponseBot!='undefined'){

       $("#divChat").append("<div class='typing-indicator' ></div>");


           /// I WANT TO HIDE IT AFTER 2SEC THEN APPEND THE USER RESPONSE

        $("#divChat").append(reponseBot+"</br>");


        }
    }