输入指示后执行代码答案

【问题标题】：execute code after typing indication over输入指示后执行代码
【发布时间】：2020-04-21 21:47:34
【问题描述】：

我无法找到解决方案。我正在开发一个聊天机器人。这是我打印所有讨论的 html，它只是一个：

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

我想为它添加打字指示符。这是它在每条消息上的工作方式：

1）用户输入他的信息（例如：你好），然后点击一个按钮

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


        }
    }

请知道如何实现这一点，谢谢

【问题讨论】：

标签： javascript html jquery css chatbot

【解决方案1】：

您可以使用setTimeout 来延迟操作。

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

let $divChat = $('#divChat');

function sendMessage() {
  $.post('http://localhost:3000/api/v1/bots/renault/converse/user1', {  
    type: 'text', 
    text: $('#userMessage').val()
  }, function(response) {
    $('#userMessage').val(''); // empty the typed message

    let $indicator = $('<div class="typing-indicator"></div>').appendTo($divChat);
    setTimeout(() => {
      $indicator.remove();
      $divChat.append(response + "</br>");
    }, 2000);
  });
};

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

【讨论】：