javascript - Ajax 调用阻止其他 javascript 代码

Question

我在页面上使用 flex slider 并且页面也为其他工作进行 ajax 调用。我的问题是当用户加载页面时，ajax 调用 阻止 flex slider 直到 ajax 请求尚未完成。完成 ajax 请求后，flex slider 加载成功。如果我删除 ajax 脚本，则 flex slider 加载速度非常快。

Flex slider 和 ajax 请求都写在这段代码之间...

$(document).ready(function(){
    $('#carousel').flexslider({
        animation: "slide",
        controlNav: true,
        animationLoop: true,
        slideshow: false,
        itemWidth: 100,
        itemMargin: 15,        
        asNavFor: '#slider'        
    });

    // Rest code of slider will come here

    // Ajax code start from here    
    $.ajax({ 
            type: "GET",
            async:false,
            url: prefixUrl, 
            success: function(results) { 
                    $(results).insertBefore('.event_container'); 
            }
        });

});

请提出任何想法，以便 ajax 调用不应阻塞 flex slider 。

谢谢

Answer 1

Async false 会等到您的操作完成。

试试这个:

$.ajax({ 
        type: "GET",
        async:true,
        url: prefixUrl, 
        success: function(results) { 
                $(results).insertBefore('.event_container'); 
        }
    });

//更新2:

实际上它正在发生，因为您已经在 ready 函数中添加了 Ajax，所以直到您的 ajax 运行页面就绪事件没有完成。尝试将其从准备就绪的文档中删除。