如何將加載圖標添加到只處理JavaScript代碼的頁面？

我一直在使用Ajax加載圖標來執行ajax請求。如何將加載圖標添加到只處理JavaScript代碼的頁面？

我想知道是否有可能用普通的javascript代碼來完成同樣的事情。例如：

$('button').on('click', function(){ 
    showLoadingBar(); 
    longProcess(); 
    hideLoadingBar(); 
});

longProcess（）僅僅是需要1-3秒來處理（它做了很多的計算和操縱DOM，但沒有做任何Ajax請求）的功能。

現在，瀏覽器在這1-3秒內暫停/凍結，所以我寧願在這段時間顯示一個加載圖標。這可能嗎？我上面的代碼幾乎忽略了showLoadingBar（）。

來源

2012-11-05 Justin

那是因爲你的職責是同步的。它等待當前功能完成，直至碰到下一個 –

你不應該有1到3第二個功能可言，最大應該是200毫秒在頁面感覺沒有響應之前。看看http://stackoverflow.com/q/10180391/1048572，http://stackoverflow.com/q/4288759/1048572和鏈接（相關）的問題 – Bergi

DOM將不會更新，直到當前Javascript過程結束，所以你不能這樣做。但是，您可以使用setTimeout要解決這個問題：

showLoadingBar(); 
setTimeout(function() {longProcess(); hideLoadingBar(); }, 1);

以上會發生什麼，如果它是不明確的，就是showLoadingBar被執行，則超時設置。然後當前進程結束並允許DOM在調用超時之前使用加載欄進行更新，在很短時間之後。處理程序執行您的繁重功能，並在完成後再次隱藏加載欄。

來源

2012-11-05 21:03:33 troelskn

我以前使用setTimeout，但我從來沒有意識到它會導致當前進程結束並更新DOM。這正是我需要的，謝謝。 – Justin

-3

哥們，

使用.bind方法，在這種情況下是這樣進行的：

$('button').bind('click', function(){ 
    showLoadingBar(); 
    longProcess(); 
    hideLoadingBar(); 
});

來源

2012-11-05 21:08:51

這沒有什麼不同。 – jfriend00

下面將爲你過上單擊動作控制。這意味着您可以禁用點擊功能，直到它完成運行。但也包括setTimeout，它將控制返回給瀏覽器（從而消除惱人的「鎖定」感覺），並在超時函數中執行我們的長時間過程，然後重新啓用按鈕！ VIOLA！

function startProc() { 
    var $this = $(this); 
    $this.off("click", startProc); 
    showLoadingBar(); 
    setTimeout(function() { 
     longProcess(); 
     hideLoadingBar(); 
     $('button').on('click', startProc); 
    }); 
} 

$('button').on('click', startProc);

來源

2012-11-05 21:12:40 SpYk3HH

這是我會用到的，因爲我一直想在發生某些事情時禁用單擊按鈕。感謝這個想法。 – Justin

如何將加載圖標添加到只處理JavaScript代碼的頁面？

回答

相關問題