如何在聊天應用程序中發佈消息之前延遲5秒鐘？

Question

我正在開發一個聊天應用程序，用戶可以聊天。

這一切都工作正常，我有一個更多的要求，這是如何放5秒延遲之前發佈每條消息，因爲我不希望用戶連續發佈？

我的代碼

Chatbox.focus(function(){ 
    $(this).val(($(this).val()==searchBoxText)? '' : $(this).val()); 
}).blur(function(){ 
    $(this).val(($(this).val()=='')? searchBoxText : $(this).val()); 
}).keyup(function(e){ 
    var code = (e.keyCode ? e.keyCode : e.which);  
    if(code==13){ 
     $('.fixedContent').append("<div class='userwrap'><span class='user'>"+user+"</span><span class='messages'>"+$(this).val()+"</span></div>"); 
     event.preventDefault(); 

     $(".fixedContent").scrollTop($(".fixedContent").height()); 
     $(this).val(''); 
    } 

http://jsfiddle.net/aULsZ/64/

編輯代碼的一些部分

window.lastChat=0; 

function sendMessage() { 
    var enteredmsg = $message.val(); 
    if (enteredmsg !== '') { 
     var now = Date.now(); 
     if (now - parseInt(window.lastChat) < 5000) //5000 miliseconds 
     { 
      alert("Sorry, no more than a message every 5 seconds"); 
      return false; 
     } 
     var msg = '{"message":"' + $message.val() + '", "sender":"' + $nickName.val() + '", "received":""}'; 
     wsocket.send(msg); 
     window.lastChat = Date.now(); 
     $message.val('').focus(); 
    } 
} 

Answer 1

一種不同的方法保存最後的聊天的日期/時間和發送一個新的前檢查。

相關代碼

在頁面加載，設置一個全局變量

window.lastChat=0;

然後，發送聊天時，檢查變量：

if(code==13){ 
    var now=Date.now(); 
    if (now-parseInt(window.lastChat) < 5000) //5000 miliseconds 
    { 
     alert("Sorry, no more than a message every 5 seconds"); 
     return false; 
    } 
    window.lastChat=Date.now(); 
... 
} 

Answer 2

你可以按下回車鍵後關閉客艙，然後使用使其在5秒後setTimeout

Chatbox.focus(function() { 
    $(this).val(($(this).val() == searchBoxText) ? '' : $(this).val()); 
}).blur(function() { 
    $(this).val(($(this).val() == '') ? searchBoxText : $(this).val()); 
}).keyup(function (e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     $('.fixedContent').append("<div class='userwrap'><span class='user'>" + user + "</span><span class='messages'>" + $(this).val() + "</span></div>"); 
     event.preventDefault(); 
     Chatbox.prop("disabled", true); 
     setTimeout(function() { 
      Chatbox.prop("disabled", false); 
     }, 5000); 

     $(".fixedContent").scrollTop($(".fixedContent").height()); 
     $(this).val(''); 
    } 

}); 

Fiddle

編輯

Chatbox.focus(function() { 
    $(this).val(($(this).val() == searchBoxText) ? '' : $(this).val()); 
}).blur(function() { 
    $(this).val(($(this).val() == '') ? searchBoxText : $(this).val()); 
}).keydown(function (e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     if (!flag) { 
      e.preventDefault(); 
      return false; 
     } 
     $('.fixedContent').append("<div class='userwrap'><span class='user'>" + user + "</span><span class='messages'>" + $(this).val() + "</span></div>"); 
     flag = false; 
     setTimeout(function() { 
      flag = true; 
     }, 5000); 

     $(".fixedContent").scrollTop($(".fixedContent").height()); 
     $(this).val(''); 
    } 

}); 

Edited Fiddle