Chrome не отображает динамическое изменение свойства CSS с помощью Jquery до вызова синхронизации Ajax

Question

У меня сложная проблема с браузером Google Chrome.

У меня есть следующий узел HTML:

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

При событии щелчка он вызывает объект чатаметод

    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;

}

Дело в том, что метод addUserToChat() содержит синхронный вызов Ajax.

Проблема с Chrome заключается в том, что изменения trigger_node не отображаются.Если вы смотрите со встроенным JS-отладчиком, то все идет хорошо (даже с отображением). Также, если вы раскомментируете предупреждение.

Он работает на Mozilla (последняя версия). Также Crome является последней версией.Я могу заметить, что во время ожидания ответа ajax страница не реагирует на такие события, как зависания, подсказки и т. Д.

Есть ли у вас какие-либо предложения по этому поводу?Как я могу реализовать метод обхода?

Answer 1

Когда вы пытаетесь отобразить / заполнить переменную trigger_node?

Похоже, вы не выполняете это действие в функции обратного вызова AJAX-запроса.Обратите внимание, что если запрос все еще выполняется, пока вы пытаетесь проверить trigger_node, он, конечно, не покажет ваши изменения.

Answer 2

Синхронные вызовы Ajax - плохая практика! Они останавливают браузер на все время и вводят пользователя в заблуждение, что что-то не работает. Вы действительно должны изменить это.

На ваш вопрос, почему вы не видите последние изменения DOM:

Когда вы изменяете что-то в JavaScript, браузер не сразу меняет DOM, потому что рисовать элемент пользовательского интерфейса намного дороже, чем рисовать дюжину. Поэтому современные браузеры будут пытаться изменить DOM как можно более ленивым.

Помимо производительности есть и другие плюсы, например

$('p').hide();

может скрыть все p элементов одновременно, хотя jQuery выберет каждый и затем изменит css.

Я не могу дать вам никаких подсказок, если не пойму ваш код лучше, извините. Спасибо!

UPDATE:

После прочтения вашего кода я бы подумал о добавлении некоторых замыканий в приложение. Основная концепция javascript заключается в том, что функции являются типами первого класса. Я лично считаю, что ваш программный поток не идеален, и это область улучшения. вызовы для вызова URL должны выглядеть примерно так:

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
   } });
}

как начало. Затем вы реорганизуете ваши вызовы getUrl.

• Забавно, что в вашем примере кода вы никогда не используете ответ, поэтому я не знаю, чего ожидает ваше приложение. Предполагая, что это что-то важное, вы всегда должны обрабатывать ответ в обратном вызове.
• Попробуйте посмотреть на свое приложение, как на дерево. Родительская функция или объект будут вызывать себя некоторые дочерние функции, которые выполняют различные задачи, которые сами будут вызывать другие функции. Создавайте методы небольшого размера и выполняющие только одно действие на действительно небольшом наборе данных / параметров.

Я не могу переписать ваш полный код, но я надеюсь, что в любом случае это поможет.