「等待服務器」時運行jquery或javascript函數

我有一個asp.net MVC應用程序，它使用最少的AJAX。在服務器響應HTML和數據之前，我有一些頁面需要很多數據庫工作。「等待服務器」時運行jquery或javascript函數

根據請求的內容和用戶有多少條記錄，用戶點擊按鈕或鏈接後可能會有幾秒或更長的延遲（可能是GET，POST，href，表單提交等）。），瀏覽器已經提交了請求並且正在旋轉輪子等待響應，但尚未加載新頁面，因爲服務器尚未返回任何內容。

因此，使用document.ready和window.load等都不是解決方案，將工作來觸發加載微調器。我需要一旦服務器發出請求就立即啓動。

此外，使用沿着線的東西

$(document).click(function() {//start loading spinner here}

也將無法工作，因爲有元素所有的地方可以與之交互，但不要讓一個服務器請求（即引導導航板等）

我需要實現一個加載微調器（或類似的東西，表示工作正在進行並且響應即將到來），當服務器發出請求時運行，並且瀏覽器正在「等待響應服務器」。

更新 - 事情我已經嘗試：

這將觸發正在加載的旋轉插頭loading.js在需要時，也將觸發它時，它不是，這樣的自舉UI元素等進行交互時，作爲

$(document).click(function() { 
    //Start loading.js anytime a button is clicked 
    //Show full page LoadingOverlay 
    $.LoadingOverlay("show"); 
});

這不起作用，因爲一旦服務器返回響應（這是其中長延遲是），還有一個第二左的僅餾分爲瀏覽器呈現HTML並顯示圖。

$(document).ready(function() { 
// Show full page LoadingOverlay 
$.LoadingOverlay("show"); 
}); 

$(window).on(load, function() { 
    //Stop loading.js after page loads 
    $.LoadingOverlay("hide"); 
});

來源

2017-08-13 amartin

到目前爲止，你做了什麼？ –

查找['beforeSend：函數（）{...}']（http://api.jquery.com/jquery.ajax/） –

我與'$（文件）。單擊發揮各地（函數（） {//在這裏開始加載微調器}'，並考慮了各種方法，我可以推斷出所有頁面上的不同按鈕和鏈接類型，儘管這聽起來非常混亂，並且想要了解是否有全局事件jquery或javascript可以綁定到瀏覽器的「等待響應」狀態 – amartin

你可以簡單地假設，只要你的頁面加載，你想顯示一個加載微調。那麼只有當一個或多個事件完成時，你纔會隱藏它。

創建一個總是在它顯示在頁面上的加載微調圖像元素
創建一個類專門來隱藏微調（如：.hide-spinner）
包裝一個函數內部的jQuery $.ajax()通話（如：fetch(url)）
在這個函數中，有jQuery的刪除.hide-spinner類
在對承諾的.always()處理程序重新添加.hide-spinner類
返回從功能阿賈克斯的承諾，這樣就可以從返回的結果

現在，您甚至可以從應用程序中的任何地方，功能，把你需要的數據繼續鏈的承諾處理程序，它永遠會在啓動時顯示微調器，並在完成時將其隱藏。

來源

2017-08-13 18:46:35 Soviut

我需要裝載微調儘快做出請求。一旦我有了之前的服務器響應它的幾分之一秒顯示其渲染和微調不再需要。這些是整頁刷新而不是AJAX調用。 – amartin

@amartin我已經寫了關於整頁刷新的新答案。 – Soviut

$("form").submit(function() { 
    $('#loader').addClass("before").removeClass("after hide"); 
}); 
$(document).ready(function() { 
    $("#loader").addClass("hide"); 
}); 
$(document).ajaxStart(function() { 
    $("#loader").addClass("before").removeClass("after hide"); 
}).ajaxStop(function() { 
    $("#loader").addClass("hide"); 
}); 
.before, .after{ 
    display:none; 
    width: 50px; 
    height: 20px; 
    position:absolute; 
    bottom: 10px; 
    right: 10px; 
} 
.hide{ 
    display:none; 
} 
.show{ 
    display:block; 
}

希望這可以幫助你。

來源

2017-08-13 19:04:11 iMatoria

謝謝，但我沒有使用AJAX。這些是整頁刷新。 – amartin

這適用於兩個@amartin。我已經在使用它。 – iMatoria

如果這些都是整頁刷新，有沒有什麼可以做。該頁面尚未加載，因爲服務器沒有返回任何內容。所以沒有html，javascript和沒有CSS來顯示任何東西。

其他慢/大型網站通常處理這個問題的方法是通過加載網頁時沒有數據，則使通過AJAX一個單獨的數據請求。這個過程有時被稱爲「補水」頁面。

使用數據綁定視圖模型像VueJS因爲它使填充與返回的數據容易的模板將是一個不錯的主意。

來源

2017-08-13 19:04:24 Soviut

「等待服務器」時運行jquery或javascript函數

回答

相關問題