Javascript function called twice, how to handle this ?

Question

My application is a LiveChat developed in C# and ASP.NET

I have a Client timer which call the webservice Function RetrieveMessages() every second. Additionally, soon after the user send a message i'm call de same function RetrieveMessages().

I have a variable that store the last message Id, so, every RetrieveMessage call retrieve only the messages that is unread.

Sometimes the the client show the same message twice, like so:

Ewerton (14:22:20) : Hello! Ewerton (14:22:20) : Hello!

the duplicity occurs only in client, the DataBase table is ok, no duplications.

I suspect tha the Timer, and the Send Message is executing a RetrieveMessage before the variable lastMessageId is updated.

How can i synchronize the call of the RetrieveMessage() ?

Here are some code to analise.

    // ThisFunction is a callback that RetrieveMessage every time the user send's a message
function SendMessageSucess(cdMsgEnviada) {
    //Carrega Mensagens
    Avalon.Services.ChatService.RetrieveMessages(CodChamado, IdLastMsg, RetrieveMessagesSucess);
}

OnTImer Tick

    // Every second, verify is exist new messages
function timer_onTick() {
    //Carrega Mensagens
    Avalon.Services.ChatService.RetrieveMessages(CodChamado, IdLastMsg, RetrieveMessagesSucess);
}

The RetrieveMessages function

function RetrieveMessagesSucess(result) {
    var myMsgs = new Array();
    for (var i = 0; i < result.length; i++) {
        var obj = eval('(' + result[i] + ')');
        if (obj != null)
            myMsgs[i] = obj;
    }

    for (var j = 0; j < myMsgs.length; j++) {
        if (myMsgs.length > 0) {
            // Armazeno o codigo da ultima mensagem recebida
            IdLastMsg = myMsgs[myMsgs.length - 1].cd_chat_message;

            if (par) {
                var novoconteudo = "<div style='background-color: #EFEFEF; padding: 10px;'>"
                par = false;
            }
            else {
                var novoconteudo = "<div style='padding: 10px;'>"
                par = true;
            }

            if (myMsgs[j].origem_mensagem == 1) // Msg enviada pelo cliente
                novoconteudo = novoconteudo + "<b>" + myMsgs[j].solicitante + ": </b>"
            else
                novoconteudo = novoconteudo + "<b>" + myMsgs[j].tecnico + ": </b>"

            var objDate = eval(myMsgs[j].datahora.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));

            novoconteudo = novoconteudo + "(" + objDate.format("HH:MM:ss") + ") ";

            novoconteudo = novoconteudo + myMsgs[j].texto + "</div>";

            divChatHistory.append(novoconteudo);

            AutoScroll();

            if (myMsgs[j].origem_mensagem == 2) // Msg enviada por um tecnico
                show_popAlert()
        }
    }
    // Verifico se o chat esta ativo
    IsChatInativo();
}

Any Ideas ?

Answer 1

try to disable your timer when you enter the tick method and re-enable it before you leave the method.

Answer 2

Set a global variable that is an object and create a new property in it whenever you add a new message to the conversation. Use your message ID in the name of the new property and set it to true or something. If each of your messages has a unique ID, then you can just verify that you haven't already processed that message before proceeding by checking for the existence of that message ID's specific property in your object.

Might look something like:

var PROCESSED_MSGS = new Object();

and then later...

for (var j = 0; j < myMsgs.length; j++) {
    if (myMsgs.length > 0) {
        thisMsgId = myMsgs[j].id;
        if(PROCESSED_MSGS['msg'+thisMsgId]) continue;
        PROCESSED_MSGS['msg'+thisMsgId] = true;
        //keep going....

Answer 3

Jage, your solution works fine. I do some adaptations in the RetrieveMessages Lets see the code:

    function RetrieveMessagesSucess(result) {
    // parsin the json and storing the messages in a array
    var myMsgs = new Array();
    for (var i = 0; i < result.length; i++) {
        var obj = eval('(' + result[i] + ')');
        if (obj != null)
            myMsgs[i] = obj;
    }


    for (var j = 0; j < myMsgs.length; j++) {
        if (myMsgs.length > 0) {

            // Verifing if the message already exists
            var divExiste = document.getElementById(myMsgs[j].cd_chat_message);

            // If not exists, put the message on the page
            if (divExiste == null) {

                // Storing the id of tha last received message. This is useful as a parameter to retrieve messages again
                IdLastMsg = myMsgs[myMsgs.length - 1].cd_chat_message;

                // Trick to a zebra style
                if (par) {
                    var novoconteudo = "<div id='" + myMsgs[j].cd_chat_message + "' style='background-color: #EFEFEF; padding: 10px;'>"
                    par = false;
                }
                else {
                    var novoconteudo = "<div id='" + myMsgs[j].cd_chat_message + "' style='padding: 10px;'>"
                    par = true;
                }

                // Putting the message on page
                if (myMsgs[j].origem_mensagem == 1) // Msg enviada pelo cliente
                    novoconteudo = novoconteudo + "<b>" + myMsgs[j].solicitante + ": </b>"
                else
                    novoconteudo = novoconteudo + "<b>" + myMsgs[j].tecnico + ": </b>"

                var objDate = eval(myMsgs[j].datahora.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
                novoconteudo = novoconteudo + "(" + objDate.format("HH:MM:ss") + ") ";
                novoconteudo = novoconteudo + myMsgs[j].texto + "</div>";
                divChatHistory.append(novoconteudo);
                AutoScroll();

                if (myMsgs[j].origem_mensagem == 2) // Msg enviada por um tecnico
                    show_popAlert()
            }
        }
    }
    IsChatInativo();
}

Thats it guys.

Thanks a lot!

excuse my bad English =o)