背景:
當實現下載檔案等後臺需長時間處理時，使用者點選頁面的一個按鈕或連結，應給予使用者一定提示告知使用者後臺正在處理中，稍後返回結果。
目前常見的處理方法有頁面跳出圖層，比如"Loading…"，“後臺處理中，請稍候"等。
或者直接跳到新的頁面，提示"下載將在一會開始，請稍候”。等待一會兒後下載就開始了。

今天我們談一下第一種。

原理:
前端頁面點選按鈕或連結時，增加JS事件，浮出Loading圖層表明正在下載，新增專有下載Cookie，並新增專有下載Cookie狀態的輪訓任務。請求後端，後端下載準備完畢後，將下載Cookie的狀態修改（此時，由於Cookie狀態改變，之前加的Cookie輪訓任務檢測到改變並將Loading圖層去除，並結束任務），將檔案寫回頁面下載。

程式碼:
JS:

var setCookie = function(name, value, expiracy) {
        var exdate = new Date();
        exdate.setTime(exdate.getTime() + expiracy * 1000);
        var c_value = escape(value) + ((expiracy == null) ? "" : "; expires=" + exdate.toUTCString());
        document.cookie = name + "=" + c_value + '; path=/';
    };

    var getCookie = function(name) {
        var i, x, y, ARRcookies = document.cookie.split(";");
        for (i = 0; i < ARRcookies.length; i++) {
            x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
            y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
            x = x.replace(/^\s+|\s+$/g, "");
            if (x == name) {
                return y ? decodeURI(unescape(y.replace(/\+/g, ' '))) : y; //;//unescape(decodeURI(y));
            }
        }
    };

    var downloadTimeout;
    var checkDownloadCookie = function() {
        if (getCookie("downloadStarted") == 1) {
            setCookie("downloadStarted", "false", 100); //Expiration could be anything... As long as we reset the value
            $('#fader').css('display', 'none');
        } else {
            downloadTimeout = setTimeout(checkDownloadCookie, 1000); //Re-run this function in 1 second.
        }
    }

    function download(url) {
        $('#fader').css('display', 'block');
        setCookie('downloadStarted', 0, 100); //Expiration could be anything... As long as we reset the value
        setTimeout(checkDownloadCookie, 1000); //Initiate the loop to check the cookie.
        window.location.href = url;
    }
 

CSS:

<style type="text/css">
		#fader {
			opacity: 0.5;
			background: rgba( 255, 255, 255, .8 )
			url('http://i.stack.imgur.com/FhHRx.gif')
			50% 50%
			no-repeat;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: none;
		}
	</style>

HTML:

<input type="button" value="Test Loading" onclick="download('/test/downloadFile?fileId=12345')" />
<div id="fader"></div>