当调用设置的间隔函数时触发倒计时

Question

我每 60 秒通过 ajax get 检索一个随机用户。此外，我想触发一个计时器，指示用户何时显示下一个 'random user'。

我尝试创建两个单独的函数，一个用于 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 比较陌生。最好的问候

Answer 1

您不需要两个单独的时间间隔。如果计数器==0，您的倒数计时器可以调用random_user()。

最后简单的在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);
   }
 }

Answer 2

你也可以这样试试

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();

当调用设置的间隔函数时触发倒计时

Trigger a countdown when a set interval function is called

javascript

php

ajax

setinterval

countdown