javascript - Chrome 在 Ajax 同步调用之前不显示 Jquery 的动态 css 属性更改

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

同步 Ajax 调用是不好的做法!他们会在整个过程中停止浏览器，并让用户误以为发生了崩溃。你真的应该改变这一点。

关于您为什么看不到最新的 DOM 更改的问题:

当您在 JavaScript 中更改某些内容时，浏览器不会立即更改 DOM，因为绘制一个 ui 元素比绘制一打要昂贵得多。因此，现代浏览器将尝试尽可能惰性地更改 DOM。

除了性能之外，还有其他优点，例如

$('p').hide();

可以同时隐藏所有 p 元素，尽管 jQuery 会选择每个元素然后更改 css。

如果不更好地理解您的代码，我无法给您任何解决方法，抱歉。谢谢!

更新:

阅读您的代码后，我会考虑向应用程序添加一些闭包。 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 调用。

• 有趣的是在您的代码示例中您从不使用响应，所以我不知道您的应用程序在等待什么。假设这是重要的事情，您必须始终在回调中处理响应。
• 尝试将您的应用视为一棵树。父函数或对象将调用自己一些处理不同任务的子函数，它们自己将调用其他函数。构建小的方法，并且只对非常小的一组数据/参数做一件事。

我无法重写您的完整代码，但无论如何我希望这对您有所帮助。