如何處理AJAX網站中的繁忙圖標？

這種併發問題問題涉及，如何顯示忙碌圖標看到這個問題上的建議：Javascript - loading/busy indicator or transparent div over page on event click 如何處理AJAX網站中的繁忙圖標？

當用戶啓動一個頁面上的AJAX請求，這是有用的，以顯示某種「工作」或忙圖標或進度指示器。如果只有一個長期運行的進程這可以在一個相對簡單的方式處理：

function do_action() { 
    show_busy_icon();  

    long_running_asynchronous_process(function() { 
     // Callback function run when process finishes 
     hide_busy_icon(); 
    }); 
}

但是，如果多個異步進程在頁面上運行，使用開/關的方法是行不通的。即使有其他進程在運行，第一個完成的進程也會關閉圖標。

那麼，如何處理在網頁上顯示一個指示符，當有一個或多個進程正在運行時顯示該指示符，並在沒有進程正在運行時關閉？

我想這將有可能一直保持運行的進程數的計數。 hide_busy_icon()只在過程計數爲0時隱藏圖標。看起來有點容易失敗。也許有一種更好/更簡單的方式，我沒有看到。

感謝您的意見和建議！

編輯：用了一段時間的顯着答案的解決方案的工作後，我很高興地說，它工作得很好。我碰到的唯一問題是我自己的腳本調用我不控制的腳本函數的情況。除非這些函數允許提供回調，否則在開始和結束時無法更新過程計數。

其中發生此罐加入一組標記爲谷歌地圖的一個實例。一旦我的腳本調用谷歌地圖功能，忙圖標消失，而標記仍在加載。

我不知道處理這個問題的好方法。

來源

2008-12-09 GloryFish

如果你想對所有的行動一樣忙指示器，然後用一個計數器。

而不是「show_busy_icon（）」，做一個「increment_busy_count（）」，如果繁忙計數從0變爲1，則調用「show_busy_icon（）」而不是「hide_busy_icon（）」，執行「decrement_busy_count（）」，它調用‘hide_busy_icon（）’如果忙計數從1到0。

來源

2008-12-09 18:47:24 Illandril

請在這裏看到我的回答：

How to display a loading screen while site content loads

我給怎麼辦正是這個小的，工作的JavaScript示例，希望它幫助。

來源

2008-12-09 18:40:33 mmattax

我不認爲你的例子解決了這個問題。你有兩個網址：url1和url2.url1需要1秒來加載，url2需要5秒加載。呼叫加載（url1）和加載（url2）他們都顯示忙圖標。 – GloryFish 2008-12-09 18:50:09

1秒後url1返回一個響應，並關閉忙圖標。您有4秒，其中url2正在工作，但沒有圖標顯示。 – GloryFish 2008-12-09 18:50:47

我認爲問題是你真的只使用一個指標。爲每個需要動作的行爲指定一個指標可能會更容易。

所以，如果你有一個頁面上的多個搜索每個搜索區域將有它是顯示或隱藏在適當的JavaScript函數自己的獨立指標。

來源

2008-12-09 18:40:39

Prototype具有此內置;一個名爲Ajax.activeRequestCount的屬性會跟蹤在任何給定時間有多少請求處於活動狀態。它還可讓您設置全局Ajax響應者，以確定是隱藏還是顯示「忙碌」圖標。

來源

2008-12-09 20:34:18 savetheclocktower

我提出了一個不同的解決方案。這是未經測試的代碼，可能無法正常工作，但只是一個概念的例證。

我假設在多個實例中不運行相同的excact動作。我這樣做是爲了確保超時或類似的問題，在通信不掛指標，但允許指示燈，當通信重新建立

var actionRegister = new Array(); 

function register_action(actionId) 
{ 
    show_busy_icon();  
    if(blockedTile.indexOf(actionId) != -1) 
    { // element already registered 
     return; 
    } 
    actionRegister.push(actionId) 
} 


function unregister_action(actionId) 
{ 
    var idx = blockedTile.indexOf(actionId); 
    if(idx != -1) 
    { 
     actionRegister.splice(idx,1); 
    } 

    if(actionRegister.length < 1) 
    { 
     hide_busy_icon(); 
    } 
}

來源

2012-04-18 09:03:41 Henrik

我們都在尋找它的錯誤的方式來解決。 Ajax調用用於使用XHR加載內容。這意味着在加載內容的整個DOM中必須有一些預定義元素。說我們有這種類型的HTML：

<html> 
<body> 
    <div id="content_1"> 
    </div> 
    <div id="content_2"> 
    </div> 
</body> 
</html>

使用jQuery，說，我們要分別裝入從content_1.php和content_2.php content_1和content_2。

使用下面的腳本來處理Ajax ::

$("content_1").html("<img src='loading.gif'>").load("http://samplesite.com/content_1.php"); 

$("content_2").html("<img src='loading.gif'>").load("http://samplesite.com/content_2.php");

這將會把一個加載GIF在各自的div和GIF將通過從PHP加載的內容以後替換。簡單的一行腳本。不需要櫃檯。

要求：任何最新版本的jQuery。

來源

2012-12-31 09:18:03

如何處理AJAX網站中的繁忙圖標？

回答

相關問題