运行进度条，然后在 x 秒后显示 div答案

【问题标题】：run progress bar then show div after x seconds运行进度条，然后在 x 秒后显示 div
【发布时间】：2018-09-25 05:30:29
【问题描述】：

当我的网站加载一个 div 在 div 显示之前隐藏 x 秒时，我只希望它在 x 秒后有一个进度条，并且该进度条将保持 100%，然后会显示一个 div，怎么能我这样做？

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
  $(document).ready(function () {
      // Hide the div
      $("#sidebar-block").hide();
      // Show the div after 5s
      $("#sidebar-block").delay(12000).fadeIn(100);  
  });    
</script>

【问题讨论】：

标签： progress-bar

【解决方案1】：

Hear 是一个无需使用 jQuery 即可工作的代码。

<html>

<head>
    <script>
        let intervalId; // preserve intervalID so we can cancel it later
        let startTime; // preserve progressbar start time
        let continueFor = 5000; // X sec
        let interval = 10; // progressbar updte interval

        let wait =
            ms => new Promise(
                r => setTimeout(r, ms)
            );

        let repeat =
            (ms, func) => new Promise(
                r => (
                    intervalId = setInterval(func, ms),
                    wait(ms).then(r)
                )
            );

        window.onload = function() {
            let div = document.getElementById("div");
            let elem = document.getElementById("progress");
            let startTime = new Date().valueOf();

            div.hidden = true;

            // this function stop the repeats, when X sec is passed.
            let stop =
                () => new Promise(
                    r => r(setTimeout(() => {
                        clearInterval(intervalId);
                        elem.hidden = true;
                        div.hidden = false;
                    }, continueFor))
                );

            // this function repeats to calculate progress bar value, at every interval.
            repeat(intervalId, function() {
                let elapse = new Date().valueOf() - startTime;
                elem.value = elem.max * elapse / continueFor;
                console.log(elem.value);
            }).then(stop());
        };
    </script>
</head>

<body>
    <div id="div"> I am here! </div>
    <progress id="progress" max="100" value="0"></progress>
</body>

</html>

【讨论】：