输入指示结束后执行代码

Question

我在找出解决方案时遇到问题。我正在开发一个聊天机器人。这是我的 html，我在其中打印所有讨论，它只是一个：

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

我想为其添加打字指示器。以下是它在每条消息上的工作原理：

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

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

2）我阅读了他的消息，并将其发送到我的后端应用程序以接收响应并将其打印在聊天元素中。

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);

}

聊天工作正常，现在我想添加打字指示器，这是这个元素（你不需要看到它的 css）：

<div class="typing-indicator"></div>

我想要当用户发送消息时我将打字指示器附加到聊天中，显示 2 秒然后隐藏它并附加然后响应机器人：像这样

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>");

        }

    }

请知道如何实现这一目标，谢谢

Answer 1

您可以用来setTimeout延迟操作。另请注意，如果您已在页面中包含 jQuery，您也可以使用其 AJAX 方法来简化代码。尝试这个：let $divChat = $('#divChat');function sendMessage() {&nbsp; $.post('http://localhost:3000/api/v1/bots/renault/converse/user1', {&nbsp;&nbsp;&nbsp; &nbsp; type: 'text',&nbsp;&nbsp; &nbsp; text: $('#userMessage').val()&nbsp; }, function(response) {&nbsp; &nbsp; $('#userMessage').val(''); // empty the typed message&nbsp; &nbsp; let $indicator = $('<div class="typing-indicator"></div>').appendTo($divChat);&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; $indicator.remove();&nbsp; &nbsp; &nbsp; $divChat.append(response + "</br>");&nbsp; &nbsp; }, 2000);&nbsp; });};另请注意，从对 AJAX 请求的响应来看，您似乎返回了一个不理想的纯文本响应，因为它可能会受到空格的影响。我建议您修改服务器端逻辑以返回序列化格式，例如 JSON 或 XML。