2017-06-07 6 views
0

私はチャットプログラムのために「タイピングの検出」機能を作ろうとしています。remove()が機能しません

ユーザーが入力またはメッセージを送信しているときはすべて検出されますが、$("#"+data.person+"").remove();は機能しません。

コンソールで「タイピング機能が停止しています - 削除しています」というメッセージが表示されているので、動作するはずです。

私には何が欠けていますか?また、コードを追加する必要がある場合はお知らせください。私はちょうどこれが起こっていることのアイデアを得るのに十分であると仮定しています。

クライアント側

var myUserName; 
 
var myUserPassword; 
 
var myUserID; 
 
var currentConversation; 
 
var conversationInvite; 
 

 

 
$(document).ready(function() { 
 
\t var socket = io.connect("localhost:3000"); 
 
    var typing = false; 
 
    var timeout = undefined; 
 

 
    function timeoutFunction() { 
 
      typing = false; 
 
      socket.emit("typing", false, currentConversation); 
 
      } 
 

 

 

 
$(document).on('pageshow', '#chat', function(e,data){ 
 
    $('.chatContent').height(getRealContentHeight()); 
 
}); 
 

 
function getRealContentHeight() { 
 
\t var header = $.mobile.activePage.find("div[data-role='header']:visible"); 
 
\t var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); 
 
\t var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); 
 
\t var viewport_height = $(window).height(); 
 

 
\t var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 
 
\t if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { 
 
\t \t content_height -= (content.outerHeight() - content.height()); 
 
\t } 
 
\t return content_height; 
 
} 
 

 

 
//-----Chat 
 
\t // Sending the message 
 
     $("#msg").keypress(function(e){ 
 
      var msg = $("#msg").val(); 
 
      if (e.which === 13) { 
 
      if (msg.trim() == "") { 
 
       return; 
 
      } else { 
 
       var timeInMs = Date.now(); 
 

 
       function fulldate(date) { 
 
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 
 
        return months[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear(); 
 
       } 
 

 
       var message = { 
 
       \t \t message_id: currentConversation, 
 
       \t \t message_sender: myUserName, 
 
        \t message_body: msg, 
 
        \t time: timeInMs, 
 
        \t date: fulldate(new Date(timeInMs)) 
 
       }; 
 
       socket.emit("send message", message, currentConversation); 
 
       $("#msg").val(""); 
 
       $("#msg").focus(); 
 

 
       clearTimeout(timeout); 
 
       timeoutFunction(); 
 
      } 
 
      } else if (e.which !== 13) { 
 
       if (typing === false && $("#msg").is(":focus")) { 
 
        typing = true; 
 
        socket.emit("typing", true, currentConversation, myUserName); 
 
        clearTimeout(timeout); 
 
        timeout = setTimeout(timeoutFunction, 3000); 
 
       } else { 
 
        console.log("Timeout function started"); 
 
        //clearTimeout(timeout); 
 
        timeoutFunction(); 
 
       } 
 
      } 
 
     }); 
 

 

 
     socket.on("isTyping", function(data) { 
 
      if (data.isTyping) { 
 
       if ($("#"+data.person+"").length === 0) { 
 
       $(".chatContent").append("<div id='"+ data.person +"'><span class='grey'>" + data.person + " is typing...</div>"); 
 
       timeout = setTimeout(timeoutFunction, 5000); 
 
       console.log(data.person); 
 
       } 
 
      } else { 
 
      \t console.log(data.person); 
 
       $("#"+ data.person +"").remove(); 
 
       console.log("is typing function stopped - remove"); 
 
       } 
 
      }); 
 

 
});

else句が実行され

\t // Detect typing 
 
    socket.on("typing", function(data, currentConversation, myUserName) { 
 
     socket.broadcast.to(currentConversation).emit("isTyping", {isTyping: data, person: myUserName}); 
 
     console.log("Someone is typing"); 
 
    });

+1

あなたは 'console.log(data.person)'を使って、 –

+0

の値をチェックしてみて、検査して生成されたhtmlをチェックしましたか? –

+0

@CarstenLøvboAndersen最新のコードをご覧ください。見てわかるように、最初に正しい名前を表示しますが、 'else'関数では未定義に表示されます。何が問題なの? – JonasSH

答えて

0

サーバー側タイムアウト関数の結果console.log(currentConversation)をタイムアウト関数に追加した結果はどうですか?タイムアウト関数が呼び出されてhtml要素が既に存在すると確信していますか?これをテストするには、data.personが正しく入力されていると仮定して、次のようにします。

ロジックを最初の句に挿入すると、要素がもう存在しないため、2番目に不要なremove文が正常に実行されます。

関連する問題