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

【问题标题】：Trigger a countdown when a set interval function is called调用设置的间隔函数时触发倒计时
【发布时间】：2019-11-15 04:20:47
【问题描述】：

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

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

【问题讨论】：

“不能正常工作” -> 你能解释一下吗，因为这里真的很模糊。
抱歉，定时器不是从一开始就触发的。在倒计时开始工作之前，我必须等待 60 秒......此外，随着时间的推移，不同的倒计时重叠 + ajax 停止获取数据。

标签： javascript php ajax setinterval countdown

【解决方案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);
   }
 }

【讨论】：

“首先，你分配给 setInterval 函数的变量应该是一个全局变量，这样你就可以清除间隔。”你确定吗？ setInterval 的回调函数保留对倒计时的词法环境（闭包）的引用。当计数器和间隔是函数范围时对我有用。它们似乎不必是全局变量。
不错的 AnonEq - 这是真的。我的头脑在另一种编程语言中，这是不可能的。
很高兴我能帮助雅各布！

【解决方案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();

【讨论】：