ダウンロード中ですので、しばらくお待ちください

背景:ダウンロードファイルなどのバックグラウンドを実現するのに長時間の処理が必要な場合、ユーザーはページのボタンやリンクをクリックし、ユーザーにバックグラウンドが処理中であることを知らせるヒントを与え、後で結果を返す.現在一般的な処理方法としては、「Loading...」、「バックグラウンド処理では、少々お待ちください.または、新しいページに直接ジャンプして、「ダウンロードは後で開始します.少々お待ちください」などの画面飛び出しがあります.しばらく待ってからダウンロードが始まります.
今日は1つ目について話しましょう.
原理:フロントエンドページでボタンやリンクをクリックすると、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:

HTML: