javascript - 当调用设定的间隔函数时触发倒计时

Question

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

我尝试创建两个单独的函数，一个用于 ajax get，另一个用于计时器。这些函数在 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

您不需要两个单独的间隔。如果 counter==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);
   }
 }