Запустить обратный отсчет при вызове функции установленного интервала - PullRequest
Новая
       21

Запустить обратный отсчет при вызове функции установленного интервала

0 голосов
/ 04 июля 2019

Я получаю случайного пользователя каждые 60 секунд через ajax get.Кроме того, я хочу запустить таймер, который указывает пользователю, когда будет отображаться следующий «случайный пользователь».

Я попытался создать две отдельные функции, одну для получения ajax, а другую для таймера.Эти функции вызываются в функции setinterval.Однако это не работает должным образом.

<script type="text/javascript">
        window.onload = function random_user() {

            /*ajax request*/
            $.ajax({
                type: "get",
                url: "random_user.php",
                async: "false",
                success: function (data) {
                    $('#random_user').html(data);
                    console.log(data)
                }
            });

            /*Countdown script*/
            function countdown() {
                var counter = 60;
                var interval = setInterval(function () {
                    counter--;
                    if (counter <= 0) {
                        clearInterval(interval);
                        return;
                    }else{
                        $('#time').text(counter);
                        console.log("Timer --> " + counter);
                    }
                }, 1000);
            }

            /*Final function call*/
            setInterval(function () {
                random_user();
                countdown();
            }, 60000); //60000 milliseconds = 60 seconds
        }
    </script>


    <ul class="accordion">
        <li>
            <a>1 user - <span id="time">60</span> sec</a>
            <div class="dropdown">
                <div id="random_user"></div>
            </div>
        </li>
    </ul>

Любая помощь высоко ценится, так как я относительно новичок в php и javascript.С наилучшими пожеланиями

Ответы [ 2 ]

1 голос
/ 04 июля 2019

Вам не нужно два отдельных интервала.Таймер обратного отсчета может вызвать random_user(), если счетчик == 0.

Наконец, просто запустите обратный отсчет после успешного запроса AJAX. 

 window.onload = function random_user() {

   /*ajax request*/
   $.ajax({
     type: "get",
     url: "random_user.php",
     async: "false",
     success: function(data) {
       $('#random_user').html(data);
       console.log(data);
       countdown();
     }
   });

   /*Countdown script*/
   function countdown() {
     var counter = 60;
     var interval = setInterval(function() {
       counter--;
       if (counter == 0) {
         clearInterval(interval);
         random_user();
       } else {
         $('#time').text(counter);
         console.log("Timer --> " + counter);
       }
     }, 1000);
   }
 }
0 голосов
/ 04 июля 2019

Вы можете попробовать что-то вроде этого 

function randomUser() {
        $.ajax({
            type: "get",
            url: "random_user.php",
            async: "false",
            success: function (data) {
                $('#random_user').html(data);
                scheduleNext()
                startCounter();
            }
        });

    }

   function startCounter() {
    const counter = 1;
        setInterval(() => {
            $('#time').text(counter);
            counter++;
        }, 1000)
    }

    function scheduleNext() {
        setTimeout(() => {
            $('#time').text('getting next user...');
            random_user();
        }, 60000)
    }

    randomUser();
...