我在找出解決方案時遇到問題。我正在開發一個聊天機器人。這是我的 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>"); } }請知道如何實現這一目標，謝謝
1 回答
精慕HU
TA貢獻1845條經驗 獲得超8個贊
您可以用來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。
- 1 回答
- 0 關注
- 124 瀏覽
添加回答
舉報
0/150
提交
取消