jQuery ajax内循环工作非常缓慢

我有下一个情况。在HTML中我有6个占位符的图像，我想动态加载：jQuery ajax内循环工作非常缓慢

<div class="block"> 
    <div class="block_content" data-category="sport"> 
</div> 
... 5 more blocks

正如我写的 - 我想动态加载图片：

$('._block_content').each(function() { 
     let $imageBlock = $(this), 
      category = $(this).data('category'); 

    $.ajax({ 
     url: here is URL, 
     dataType: 'json' 
    }).then(function (data) { 
      console.log('Success function loaded'); 
     }, 
     function() { 
      console.log('Failed function loaded'); 
});

现在的问题是，这样的做法效果很好，当图片被发现，非常缓慢，当没有。如果例如我会输入错误的网址，首先我会得到6次错误净额:: ERR_NAME_NOT_RESOLVED，然后只有失败功能将被调用。我需要等待3秒左右才能获得失败的功能。有没有什么办法可以让内部异步Ajax请求循环更快？有任何想法吗？

来源

2017-01-09 ovod

问题你在做什么不是要求ajax如果做或不做你只是跑动g 2之后的另一个功能是不管发生了什么事情。你应该使用那个'success：function（）'和'error：function（）'或者'complete：function（）' – liborza

不行，你不能让它更快。如果服务器需要3秒钟才能告诉您图像不存在，则需要3秒。 –

我建议不循环Ajax，但有Ajax循环。

var categories=[],cnt=0; 
function loadAjax() { 
    if (cnt==categories.length) return; 
    $.ajax({ 
    url: "here is URL?cat="+categories[cnt++], 
    dataType: 'json' 
    }, 
    success:function (data) { 
    console.log('Success function loaded'); 
    }, 
    always:function() { loadAjax() }) 
} 

$('._block_content').each(function() { 
    categories.push($(this).data('category')); 
}); 
loadAjax();

来源

2017-01-09 19:00:30 mplungjan

这不会导致延迟依次堆叠，从而导致相同的结果，但延迟更长吗？ –

同意@KevinB ..它会比普通循环慢。 – liborza

无论失败或成功，它都会尽快调用它，如果超过限制图像，它将不会达到浏览器限制 – mplungjan

您有几个选项，例如您可以使用浏览器缓存或对您的缓存响应使用承诺。

function img_async(source) { 
    return $.Deferred (function (task) { 
    var image = new Image(); 
    image.onload = function() {task.resolve(image);} 
    image.onerror = function() {task.reject();} 
    image.src=source; 
    }).promise(); 
}

内，您的循环：

$.when(img_async(IMAGE_URL)).done(function (image) { 
    $(this).empty().append(image); 
});

来源

2017-01-09 19:13:21 Edward

据此，调用阿贾克斯（）应返回jqXHR对象：
http://api.jquery.com/deferred.fail/

我相信这应该解决您的问题：

$.ajax({ 
     url: here is URL, 
     dataType: 'json' 
    }) 
    .done(function (data) { 
      // do stuff 
     }) 
     .fail(function() { 
    alert("$.get failed!"); 
    });

来源

2017-01-09 19:19:05

据我所知：$ .ajax（）。然后（功能，功能）相当于完成/失败对。 – ovod

啊，我会寻找更好的答案。 –

jQuery ajax内循环工作非常缓慢

回答

相关问题