PHP、jQuery & Ajax 調用故障

Question

我正在為我的 Ajax 調用使用 jQuery...我有 x 數量的 Ajax 調用 Z9516DFB15F51C7EE19A4D46BZC0 到 aDBE19A4D46BZC0。 這些 Ajax 加載請求是由 PHP foreach 循環生成的......問題是它們渲染順序不正確； 它們被設置在數組中......

<script type="text/javascript">
function loadPage(target, url, append)
{
    if (append == true) {
        $.get(url, function(data) { $(target).append(data) });
    }
    else {
        $(target).load(url);
    }
    return false;
}
</script>

////// ----- PHP

<?php
    $this->data['sidebar']  = array('login', 'active_leagues', 'latest_forum_threads', 'latest_matches', 'sponsors');

    if (isset($sidebar[0]) && !empty($sidebar[0]))
    {
        echo '<div class="right_col">';
        foreach($sidebar as $val)
        {
            echo "<script>loadPage('.right_col', 'http://dev.banelingnest.com/sidebar/". $val ."', true)</script>";
        }
        echo '</div>';
    }

我想知道造成這種情況的原因是否是 web 服務器對某些請求的響應比其他請求慢……除此之外，我不知道為什么會發生這種情況。 你有什么想法我可以保持請求的順序嗎？

Answer 1

您必須在請求之前創建參考點，並且 append 將結果發送給它們：

var counter = 0;

function loadPage(target,url,append)
{
    if (append == true) {
        var id = "container_"+counter;
        $(target).append("<div id='"+id+"'></div>")
        $.get(url, function(data) { 
            $("#"+id).append(data);
        });
        counter++;
    } else {
        $(target).load(url);
    }

    return false;
}

您的參考元素將在每次loadPage()調用時附加到目標，因此它們將按正確的順序出現，並且請求可以以任何順序出現，它們將被加載到正確的位置。

Answer 2

發生這種情況是因為 ajax 調用是異步的，並且它們 go 輸出的順序與它們返回的順序無關。 它們都將獨立發生，並且預計某些人會比其他人跑得更快。

您將需要使用 $.ajax 而不是 $.get，並將 async 設置為 false。

請參閱此問題： 如何讓 jQuery 執行同步而非異步 Ajax 請求？

您還可以使用@inti 提供的獨特而有趣的解決方案。

Answer 3

您可以執行同步請求而不是異步請求，這會迫使瀏覽器等到每個單獨的請求完成后再開始下一個請求。 任何“冗長”請求（或許多短請求）的缺點是，瀏覽器將被鎖定。

您可能想要調查在單個 AJAX 調用中發送所有請求，而不是每次調用一個請求。 這樣，雙方的腳本就很容易保持一切井井有條。 否則，您會因為與服務器的用戶鏈接具有低錯誤率、低延遲和低擁塞而陷入困境。

所以而不是做相當於

loadPage(1); // fetch data #1
loadPage(37); // fetch data #37
loadPage(203); // fetch data #203

做類似的事情

loadPage([1,37,203]); // fetch all 3 at once.

Answer 4

我有兩個想法可能會有所幫助，第一個是：

jQuery has a $(document).ready(function() function that is possibly being called from a parent function or being inherited somehow, this means the JavaScript won't run before the rest of the PHP has loaded.

我已經看到一些函數從 jQuery 繼承了它而沒有聲明它。

第二個是：我假設這個 function 在您的頁面的頭部或早期運行，而不是在文檔的腳或稍后運行。

我希望他們有所幫助。

Answer 5

這是我對需要按順序加載的數組或 url 所做的。 我首先創建了包裝器的順序，然后是 ajax 調用，然后將結果加載到匹配的包裝器中。 這使調用保持異步，但您仍然是正確的順序。

$.fn.dashboarder = function(options) 
{
    var settings = $.extend({ 
        urls:        [],
    }, options || {});

    var self = this;

    if (settings.urls.length) 
    {
        $(self).html('');
        /// create wrapper blocks in the proper order, so they eventually display in this order
        $(settings.urls).each(function( index, value ) 
        {
            var wrapper = $( "<div />" )
                .addClass('dashboard-block-item')
                .attr('id', 'dashboard-block-item-'+index);
            $(self).append($(wrapper));
        });

        $(settings.urls).each(function( index, value ) 
        {
            $('#dashboard-block-item-'+index).load(value, function( response, status, xhr ) 
            {
            }).delay(5000 * index);
        });

    }

    return this;
}

function debug( obj ) {
    if ( window.console && window.console.log ) {
        window.console.log( obj );
    }
};

Answer 6

這是 AJAX 的本質，是的，服務器對某些響應的響應速度比其他響應快。

如果您希望它們按順序排列，則必須進行第一次調用，然后在complete事件時調用下一個，依此類推； 本質上是創建一個同步的調用鏈（有點違背 AJAX 中的A ）。

在不知道您想要它們的具體原因的情況下，這可能比它的價值要多得多。

不管你怎么做，它都會影響用戶體驗，因為如果一個呼叫很慢，那么其他所有呼叫都必須等待。

Answer 7

如 inti 所述，最簡單的解決方案是創建占位符。 您的元素不一定會按順序出現，但它們最終會以正確的順序出現。 如果您也需要它們按順序出現，這里有一個使用deferreds的簡單隊列：

var queue = [];
function loadPage(target,url) {
    queue.push($.get(url));
    $.when.call($, queue).then(function() {
        $(target).append(Array.prototype.pop.call(arguments));
    });
}

AJAX 調用將並行運行，但回調將嚴格按順序觸發。