Javascript 如何让jQuery聊天室回复我

我正在尝试在我的移动应用程序上构建前端聊天功能。我一直在关注youtube上的一个关于如何做到这一点的系列节目，但在视频14中，这位先生走的方向与我想要的不同。我想成为第一个输入的人，然后让“机器人”响应我（以预定的字符串）。不幸的是，机器人问你的名字，然后你回答，然后机器人说很高兴认识你（名字）

我的问题是，使用我将提供的代码，如何让“bot”在我首先键入后响应我

$(function(){

  $("#chatSend").click(function(){

    var username = "<span class = 'chatUsername' =>CNN_News: </span>";

    var newMessage = $("#chatTextBox").val();

    $("#chatTextBox").val("");

    var prevState = $("#chatContainer").html();

    if (prevState.length > 7){
        prevState = prevState + "<br>";
    }

    $("#chatContainer").html(prevState + username + newMessage);

    $("#chatContainer").scrollTop($("#chatContainer").prop("scrollHeight"));

  });

});

$（函数（）{
$（“#chatSend”）。单击（函数（）{
var username=“CNN_新闻：”；
var newMessage=$（“#chatterxtbox”）.val（）；
$（“#ChatterXtbox”）.val（“”）；
var prevState=$（“#chatContainer”）.html（）；
如果（prevState.length>7）{
prevState=prevState+“
”；
}
$（“#chatContainer”）.html（prevState+username+newMessage）；
$（“#chatContainer”）.scrollTop（$（“#chatContainer”）.prop（“scrollHeight”）；
});
});

如果问题是，机器人先问他的问题，然后你键入你的问题/答案…等等，你想成为第一个，然后忽略机器人发送的内容

当您加载页面并开始聊天时，清除聊天窗口中的任何内容。 //首先-清空bot输入的任何内容 $（“#chatContainer”）.empty（）

或者。。。如果你想要一个更好的答案，那么解释一下机器人是如何工作的

这个问题仍然令人困惑，但这里有一个非常简单的快速机器人演示

http://jsfiddle.net/91svxht9/4/

和代码

Javascript

var username = "John";
var botname = "Bot";
var sendBtn = $("#chatSend");
var chatContainer = $("#chatContainer");
var botResponses = [
    "Wow, thats cool", "Im a bot", "who are you", "thats soo cool" , "give me all your money"
];
var addMessage = function(who, msg) {
    var ownerclass = "bot";
    if ( who == username ) {ownerclass = "mine";}
    chatContainer.append("<div class='message "+ownerclass+"'><span>"+who+"</span>: "+msg+"</div>");
    sendBtn.attr("disabled", true);//disable send until bot responds
    chatContainer.scrollTop($("#chatContainer").prop("scrollHeight"));    
}
var botRespond = function() {
    var msg;
    msg = botResponses.shift();
    if ( !msg ) { msg = "i have nothing more to say";}
    addMessage(botname, msg);
    sendBtn.removeAttr("disabled");//disable send until bot responds
}


$(function(){
  sendBtn.click(function() {
    var msg = $("#chatTextBox").val();
    if ( !msg ) {alert("enter message before clicking send");return false;}
    addMessage(username, msg);
    setTimeout(function() {botRespond();}, 2000);
  });
});

---

我对你到底想要什么有点困惑。你能不能给我发一封道歉信，只需要建立一个JSFIDLE帐户。这里的链接是我的JS FIddle，jsfiddle.net/mattmeg4/91svxht9机器人的工作原理是首先键入“你叫什么名字”，然后你回答“鲍勃”，然后它说“你好，鲍勃，你好”我想做的是能够先键入，然后让机器人准确地说，“好吧，这是怎么回事？”

var username = "John";
var botname = "Bot";
var sendBtn = $("#chatSend");
var chatContainer = $("#chatContainer");
var botResponses = [
    "Wow, thats cool", "Im a bot", "who are you", "thats soo cool" , "give me all your money"
];
var addMessage = function(who, msg) {
    var ownerclass = "bot";
    if ( who == username ) {ownerclass = "mine";}
    chatContainer.append("<div class='message "+ownerclass+"'><span>"+who+"</span>: "+msg+"</div>");
    sendBtn.attr("disabled", true);//disable send until bot responds
    chatContainer.scrollTop($("#chatContainer").prop("scrollHeight"));    
}
var botRespond = function() {
    var msg;
    msg = botResponses.shift();
    if ( !msg ) { msg = "i have nothing more to say";}
    addMessage(botname, msg);
    sendBtn.removeAttr("disabled");//disable send until bot responds
}


$(function(){
  sendBtn.click(function() {
    var msg = $("#chatTextBox").val();
    if ( !msg ) {alert("enter message before clicking send");return false;}
    addMessage(username, msg);
    setTimeout(function() {botRespond();}, 2000);
  });
});

<div id="chatContainer">

</div>

<div id="chatControls">
  <textarea id="chatTextBox" placeholder = "Enter your message       
  here...">
  </textarea>
  <button id="chatSend">Send</button>
</div>

#chatContainer{
    width: 95%;
    height: 65px;
    background-color: white;
    border: 1px solid #333;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 10px;
    opacity: .9;
    overflow-y:scroll !important;
    padding: 5px;
}
#chatTextBox{
    resize: none;
    width: 65%;
    height: 35px !important;
    float: left;
    opacity: .9;
}
#chatControls{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}
#chatSend{
    resize: none !important;
    width: 50%;
    height: 35px !important;
    display: inline-block;
    max-width: 30%;
    float: right;
    opacity: .9;
    padding: 5px;
}


.message > span {
    color: red;
    font-weight: bold;
}
.chatBot{
    color: #484d97;
    font-weight:  bold;
}
.message {margin-top: 4px;}
.message.mine {
   color: black;   
}
.message.bot {
   color: gray;   
}
.message.bot>span {
   color: green;   
}