AJAX執行錯誤

我有以下的js代碼段：AJAX執行錯誤

cat_images = $(".category-description").next().find("img"); 
cat_images.each(function() { 
    url = $(this).parent().attr("href"); 
    id = url.split("id="); 
    id = id[1]; 
    url = "cat_url.php?i="+id; 
    this_image = this; 

    $.get (url, function (data) { 
     $(this_image).attr("src", data); 
    }); 
});

目前，只有最後一個元素遍歷由每個迴路是由ajax.get部分更新。我認爲這是與ajax與循環相互作用差的事情，因爲在ajax函數中使用this會使其完全失敗。

無論如何，有沒有在等待jquery完成jquery時延遲循環？（寧願不混合常規JS）

來源

2012-10-26 tracer tong

這是因爲'get'函數是非阻塞的（異步），這意味着'each'循環不會等待resp ONSE。當你從任何get調用得到響應時，你已經完成了迭代，'this_image'等於最後一個。請參閱以下Vega的答案，瞭解如何處理此問題。 – Archer

嘗試它包裹封閉內，

cat_images.each(function() { 
    url = $(this).parent().attr("href"); 
    id = url.split("id="); 
    id = id[1]; 
    url = "cat_url.php?i="+id; 
    this_image = this; 

    (function (this_image) { 
     $.get (url, function (data) { 
     $(this_image).attr("src", data); 
     }); 
    })(this_image); 
});

來源

2012-10-26 16:13:14

歡呼！從我甚至考慮過使用js封閉開始，這個時代已經過去了 - 我永遠不會想到。 –

我最初的想法是使用閉包，然後我認爲我可能會過度思考:(。+1 –

另一種方法是使用$ .ajax並將this_image作爲上下文 –

看來雖然Vega的解決方案正常工作，我建議你改變你的邏輯有點。

問題是，如果你有10個cat_images，你會做出10個不同的請求，這不是很優雅。

您應該考慮創建一個新的cat_url.php，它將接收一個或多個ID並且一次返回所有的URL。你也可以將html裏面的圖像標識爲cat_image，所以當你將URL作爲JSON返回時，你可以設置每個src。

你的HTML代碼段應該是這樣的：

<a href="url?id=1"> 
    <img src="..." id="cat_image1" rel="1" /> 
</a>

這將是你最後的js代碼片段：

var ids = []; 
cat_images.each(function() { 
    ids.push($(this).attr("rel")); 
}); 

var data = "ids=" + ids; 
$.get ({ 
    url: url, 
    data: data, 
    dataType: 'json', 
    success: function (data) { 
    for (var img in data.images) { 
     $("#cat_image" + img.id).attr("src", img.url); 
    }; 
    } 
});

你cat_images.php應該返回JSON這樣的：

{ 
    images: [ 
    {id: 1, url: 'url1.jpg'}, 
    {id: 2, url: 'url2.jpg'}, 
    {id: 3, url: 'url3.jpg'} 
    ] 
}

來源

2012-10-26 18:40:57

回答

相關問題