Question

I have a tricky problem with Google Chrome Browser.

I have the folowing HTML node:

<div class="result-req-chat pointer float-right" onclick="chat.addUser(this/*, other vars*/)" ><img src="/images/profile_icon_4.png" alt="" /></div>

On the click event it triggers the chat object’s method

    this.addUser = function(trigger_node, id, is_silent, session, show_block_message){
    if(trigger_node){
        this.bk_trigger_node.html = trigger_node.innerHTML;
        this.bk_trigger_node.cn = trigger_node.className;
        trigger_node.innerHTML = '';

        jQuery(trigger_node).addClass("loader");
        jQuery(trigger_node).removeClass("bpurple");
        jQuery(trigger_node).removeClass("bgray");
        jQuery(trigger_node).removeClass("button");
    }
    //alert('if this is executed then it displays the previous changes of the node');
    if(trigger_node.innerHTML == ''){
        this.addUserToChat(id, is_silent, session, show_block_message);
    }
    if(trigger_node){
        trigger_node.innerHTML = this.bk_trigger_node.html;
        trigger_node.className =this.bk_trigger_node.cn;
    }
}

addUserToChat():

    this.addUserToChat = function (id, is_silent, session, show_block_message){
    var response = this.chat_tabs.addTab(id, null);
    if(response.error){
        callUrl("/me/chat/remove-session/id/"+id);
        this.chat_tabs.removeTab(id);
        if(show_block_message) alert(response.message);
    }else{

        this.createTabsBar();
        if(!is_silent){
            this.switchTab(id);
            this.resetContainer(is_silent);
        }
        if(id == this.chat_tabs.active_tab){
            this.active_chat_obj.refresh(session);
        }

        if(this.closed){
            if(this.stop_check){
                return;
            }
            this.resetContainer();
            this.switchTab(id);
        }

    callUrl("/me/chat/add-session/id/"+id);
    }
}

chat_tabs.addTab():

    // creates and adds the a tab
this.addTab = function(id,name,user_data,session){
    var exists = this.getTab(id);
    if(!exists){

        if(session){
            var user_session_id = session.id;
            var user_session_data = session.data;
        }else{
            var session = this.createSession(id);
            if(session.error){
                return session;
            }
            var user_session_id = session.id;
            var user_session_data = session.data;
        }
        if(name){
            var user_name = name;
        }else{
            var user_name = this.getName(id);
        }
        if(user_data){
            var user_data = user_data;
        }else{
            var user_data = this.getData(id);
        }

        var ob = new Object({
            user_id: id,
            user_name: user_name,
            user_data: user_data,
            user_session_id: user_session_id,
            user_session_data: user_session_data,
            has_new:false,
            chat_screen: new ChatScreen(session, id, user_name, user_data, this.main_user_id, this.main_user_photo)
            });

        this.chat_users.push(ob);
        return ob;
    }else{
        return exists;
    }
}

callUrl():

    function getUrl(url){
return jQuery.ajax({ type: 'GET', url: url, async: false }).responseText;

}

The point is that the method addUserToChat() contains a syncronous Ajax call.

The problem with Chrome is that the trigger_node changes aren’t displayed. If you watch with the built-in JS debuger then everithing goes ok ( even with displaying ) .Also if you uncomment the alert.

It runs on Mozilla ( latest version ).Also the Crome is the latest version.
I can observe that in the time that it waits for the ajax response, the page is unresponsive to events like hovers, tips etc.

Do you have any suggestions for this? How can I implement a workarround method?

Answer 1

Synchronous Ajax calls are bad practice! They stop the browser for the entire duration and fool the user into thinking something crashed. You really should change this.

To your question why you don’t see the latest DOM changes:

When you change something in JavaScript the browser will not immediately change the DOM, because painting a ui element is far more expensive than painting a dozen. So modern browsers will try to change the DOM as lazy as possible.

There are, apart from performance other upsides, like

$('p').hide();

can hide all p elements at the same time although jQuery will select each and than change the css.

I cant’t give you any hind of a workaround without understanding your code better, sorry. Thanks!

UPDATE:

After reading your code, I would think about adding some closures to the application. A basic concept of javascript is that functions are first class types. I personally think, that your program flow is less than ideal, and this is the area of improvement. the calls to call url should look something like this:

var callUrl = function(url, callback, interactionStoped) {
   if(typeof interactionStoped != 'undefined' && interactionStoped == true) {
       //add code to display some loading animation
   }

   jQuery.ajax({ type: 'GET', url: url, success: function(data) {
       callback(data);
       //remove loading animation here
   } });
}

as a start. Then you refactor your getUrl calls.

• Funny thing is in your code example you never use the response, so I don’t know what your app is waiting for. Assuming it is something important you must handle the response always in your callback.
• Try looking at your app as if it were a tree. A Parent Function or Object will call itself some child functions that handle different tasks, wich themselves will invoke other functions. Build methods that are small and do only one thing on a really small set of data / parameters.

I can’t rewrite your complete code, but I hope this helps anyway.