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內循環工作非常緩慢

回答

相關問題