выполнить код после ввода указания над

Question

У меня проблема с поиском решения. я разрабатываю чат-бота. это мой html, где я распечатываю все обсуждение, его всего одно:

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

я хочу добавить к нему индикатор ввода. Вот как оно работает с каждым сообщением:

1) Пользователь вводит свое сообщение (например, Hello) и нажимает кнопку

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

2) Я прочитал его сообщение и отправил его в приложение mybackend, чтобы получить ответ и распечатать его в элементе чата. .

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>

я хочу, когда Пользователь отправляет свое сообщение. i Присоедините индикатор чата к чату, покажите его на 2se c, затем скройте и добавьте ответный бот: вот так

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() {
  $.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 похоже, что вы возвращаете простой текстовый ответ, который не идеален, поскольку на него могут влиять пробелы. Я бы посоветовал вам изменить логику на сервере c, чтобы она возвращала сериализованный формат, например JSON или XML.