Ajax 调用阻止其他 javascript 代码

Posted 2023-05-09

【中文标题】Ajax 调用阻止其他 javascript 代码

【英文标题】：Ajax call blocking other javascript code

【发布时间】：2016-11-10 14:14:52

【问题描述】：

我在页面上使用 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 滑块。

谢谢

【问题讨论】：

如果您不希望它阻塞，请不要将 async 设置为 false。

@kinakuta# 更改 async:true 后也不工作

控制台没有错误

你说“不工作”......会发生什么，你期望什么

“不工作”意味着同样的事情发生

【参考方案1】：

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

试试这个：

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

//更新2：

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

【讨论】：

我添加了新的 cmets，请尝试一下..希望能解决您的问题

Ya # 使用 async:true 后，它正在工作，但 ajax 没有给出正确的响应意味着 async:false 给出 6 列结果但 async:true 给出 3 列结果。你能建议如何处理这个问题吗？

你的ajax有依赖吗？

你能为此创建一个小提琴吗..我无法完全解决你的问题

async: false 没问题，但 async: true 没有按顺序给出响应 jsfiddle.net/anilk1797/y7yhd/49 我想要相同的结果，但使用 async: true。

【参考方案2】：

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

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

【讨论】：

更改 async:true 工作速度很快，但在 ajax 请求完成后再次加载 flex 滑块。是否有任何其他选项使 flex 滑块和 ajax 调用不相互依赖？