Question

我正在创建一个模拟聊天机器人，并注意到当我希望我的机器人以2行回复时，例如：

嗨，我是机器人。

和

你是谁？

我要么得到其中一个结果。

结果1： JS仅推送最后一个send函数

结果2： JS同时推送它们，但动画不再存在。

这是我正在处理的发送功能：

function send_msg(msg) {
  var prevState = $("#conversation").html();
  if (prevState.length > 3) {
    prevState = prevState + "<br />";
  }

  //Add bot name before each message
  $("#conversation").html(
    prevState +
      "<span class='current_msg'>" +
      "<span class='bot'>Chatbot: </span>" +
      msg +
      "</span>"
  );
  $(".current_msg").hide();
  $(".current_msg").delay(1200).fadeIn();
  $(".current_msg").removeClass("current_msg");
}

然后，对于这部分对话，我正在尝试加载两个响应：

function ai(msg) {
  if (username.length < 3) {
    username = msg;
    send_msg("Hi " + username + ", nice to meet you!");
    // Remove text bar
    $('#controls').empty();
    send_msg("Have you ever heard about conversational ui?");
  }

  // function options
}

这也是我的 JSFiddle 。

关于如何在保持淡入效果的同时显示两个send_msg命令的任何想法？

Answer 1

您可以使用回调来实现您想要的效果。在上一行完成后执行每一行。我updated your jsfiddle

首先，您应该在淡入淡出完成后删除类current_msg，然后您可以将回调传递给send_msg作为第二个参数，并在完成send_msg时执行该操作。< / p>

function send_msg(msg, callback) {
  var prevState = $("#conversation").html();
  if (prevState.length > 3) {
    prevState = prevState + "<br />";
  }

  //Add bot name before each message
  $("#conversation").html(
    prevState +
      "<span class='current_msg'>" +
      "<span class='bot'>Chatbot: </span>" +
      msg +
      "</span>"
  );
  $(".current_msg").hide();
  $(".current_msg").delay(1200).fadeIn(function () {
    $(this).removeClass("current_msg");
    if ( typeof callback == "function")
        callback();
  });
}

然后嵌套你的消息：

send_msg("Hi " + username + ", nice to meet you!", function () {
    send_msg("Have you ever heard about conversational ui?");
});

Answer 2

问题是$(".current_msg").removeClass("current_msg");您在执行$(".current_msg").delay(1200).fadeIn();之前删除了元素的类，并且第一条消息仍然隐藏。您需要做的是在显示上一条消息后致电send_msg。你可以用这样的东西做到这一点：

function ai(msg) {
  if (username.length < 3) {
    username = msg;
    $('#controls').empty();
    send_msg("Hi " + username + ", nice to meet you!", function(){ 
        $(".current_msg").removeClass("current_msg");
        send_msg("Have you ever heard about conversational ui?");
    });
  }
}

function send_msg(msg, callback) {
  ....
  $(".current_msg").hide();
  $(".current_msg").delay(1200).fadeIn(callback);
}

Answer 3

你必须引入两个概念：

回调函数：在操作结束时（在发出消息后）定义特定功能
队列：致电回叫

请参阅以下内容：

// Get User's name
var username = "";

function send_msg(msg, callback) {
  var prevState = $("#conversation").html();
  if (prevState.length > 3) {
    prevState = prevState + "<br />";
  }

  //Add bot name before each message
  $("#conversation").html(
    prevState +
      "<span class='current_msg'>" +
      "<span class='bot'>Chatbot: </span>" +
      msg +
      "</span>"
  );
  $(".current_msg").hide();
  $(".current_msg").delay(1200).fadeIn()
  .queue(
    () => {callback && callback()}
  );
  $(".current_msg").removeClass("current_msg");
}

function get_username() {
  send_msg("Hello, I'm Kyle, what's your name?");
}

function ai(msg) {
  if (username.length < 3) {
    // Remove text bar
    $('#controls').empty();
    
    username = msg;
    send_msg("Hi " + username + ", nice to meet you!", () => {
    send_msg("Have you ever heard about conversational ui?");
  });
  }

  // function options
}

$(function() {
  get_username();

  $("#message").keypress(function(event) {
    if (event.which == 13) {
      if ($("#slideThree").prop("checked")) {
        $("#sendMsg").click();
        event.preventDefault();
      }
    }
  });

  $("#sendMsg").click(function() {
    // Set user's name in front of each message
    var userName = "<span class='username'> Me: </span>";
    var newMsg = $("#message").val();

    $("#message").val("");

    var prevState = $("#conversation").html();
    if (prevState.length > 3) {
      prevState = prevState + "<br />";
    }
    $("#conversation").html(prevState + userName + newMsg);

    ai(newMsg);

    $("#conversation").scrollTop($("#conversation").prop("scrollHeight"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
      <div class="contain">
        <!--h1>
          Chat
        </h1-->
      </div>
    </header>
    <div class="contain" id="conversation"></div>
    <div class="contain" id="controls">
      <textarea id="message" placeholder="Type Your Message"></textarea><button id="sendMsg">Send</button>
    </div>
    <div class="contain">
      <div class="slideThree left">
        <input checked="true" id="slideThree" name="check" type="checkbox" value="none" /><label for="slideThree"></label>
      </div>
      <p class="left checkLabel">
        Send on Enter
      </p>
    </div>

使用不同的文本应用两次函数

3 个答案: