запустить индикатор выполнения и затем показать div через x секунд - PullRequest
Новая
       8

запустить индикатор выполнения и затем показать div через x секунд

0 голосов
/ 25 сентября 2018

когда мой сайт загружает div, он скрыт за x секунд до того, как показывается div, я просто хочу, чтобы через 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>

1 Ответ

0 голосов
/ 26 сентября 2018

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>
...