Ajax 调用阻止其他 javascript 代码

Question

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

Flex 滑块和 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 滑块。

谢谢

Answer 1

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

试试这个：

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

//更新2：

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

Answer 2

我们使用 ajax 不进行回发操作，在您提到的代码中，您提到的 async: false 会导致同步 ajax 调用。同步 ajax 调用使您停止/阻止，直到您获得上一个请求的响应。所以试试这个：

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