如何查看聊天机器人打开后的秒数？

Question

我的html代码如下：

<div class="chatbot chatbot--closed ">
  <div class="chatbot__header">
    <p><strong>Got a question?</strong> <span class="u-text-highlight">Ask Harry</span></p>
    <svg class="chatbot__close-button icon-speech" viewBox="0 0 32 32">
      <use xlink:href="#icon-speech" />
    </svg>
    <svg class="chatbot__close-button icon-close" viewBox="0 0 32 32">
      <use xlink:href="#icon-close"  data-toggle="modal" data-target="#basicModal" />
    </svg>
  </div>
  <div class="chatbot__message-window">
    <ul class="chatbot__messages">
      <li class="is-ai animation">
        <div class="is-ai__profile-picture">
          <svg class="icon-avatar" viewBox="0 0 32 32">
            <use xlink:href="#avatar" />
          </svg>
        </div>
        <span class="chatbot__arrow chatbot__arrow--left"></span>
        <p class='chatbot__message'><strong class='intro'>Hello, I’m Harry, your virtual assistant. I'm here to help with your general enquiries.</strong>Example of questions you can ask for demo purpose: <br><em>Hi / How are you? / I'd like some financial advice / Can you email me a statement? / Can I get a form? /  How do I cancel my life insurance? </em></p>
      </li>
      <!-- Message here -->
    </ul>
  </div>
  <div class="chatbot__entry chatbot--closed">
    <input type="text" class="chatbot__input" placeholder="Write a message..." />
    <svg class="chatbot__submit" viewBox="0 0 32 32">
      <use xlink:href="#icon-send" />
    </svg>
  </div>
</div>

演示和完整代码如下：https://codepen.io/trendingnews/pen/wvBorrR?editors=1010

当用户单击聊天机器人上的关闭时，它将出现一个反馈模式，以填充使用聊天机器人的用户体验。我希望这个反馈模式出现时，聊天机器人已经打开了大约30秒。因此，如果聊天机器人已经打开了超过30秒，并且用户单击了close，则会出现模态反馈。但是如果聊天机器人在30秒内没有打开，用户点击关闭聊天机器人，模式就不会出现

我该怎么做呢？

Answer 1

在你的代码中导航有点困难，但我会提供指导：

当聊天机器人打开时，将变量"showModal“的值赋给false。然后创建一个在30秒后执行的超时，并将此变量设置为true。

// global scope variables
var showModal = false;
var timeoutId;

// code for opening chatbot
function openChatbotHandler() {
    // do some cleaning first
    if(timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
    }

    timeoutId = setTimeout(function() {
        showModal = true;
    }, 30000)
}

当聊天机器人关闭时，只需检查变量"showModal“的值。如果它是假的，那么就不要打开一个模式，如果它是真的，那就打开一个模式。

// code for closing chatbot
function closeChatbotHandler() {
    // do some cleaning first
    if(timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
    }

    if(showModal) {
        // reset it for next time around
        showModal = false; 


        // code for opening your modal
    }
}

Answer 2

 $chatbotHeader.addEventListener("click", () => {
     var element = document.getElementsByClassName("chatbot");
     element[0].style.display = "none";
     showModal.chatClose = performance.now(); // Sets when chat gets open
     showModal();
     document.getElementById("chat-circle").style.display="block";
  },false);

 document.getElementById("chat-circle").addEventListener( "click", () => {
    var element = document.getElementsByClassName("chatbot");
    element[0].classList.remove("chatbot--closed");
    element[0].style.display = "block";
    showModal.chatOpen = performance.now(); //Sets when chat window is closed
    $chatbotInput.focus();
    console.log(this);
    document.getElementById("chat-circle").style.display="none";   
   }
 );

 function showModal() {
   if( showModal.chatClose - showModal.chatOpen > 1800) {
      alert("show Modal"); // Code to show modal here 
   }
   showModal.chatClose = showModal.chatOpen = 0;
 }