我怎样才能做一个javascript计时器，在计时器结束时显示div几秒钟并重复它答案

【问题标题】：How can i do a javascript timer that show div at the end of the timer for few second and repeat it我怎样才能做一个javascript计时器，在计时器结束时显示div几秒钟并重复它
【发布时间】：2016-01-17 04:16:51
【问题描述】：

我添加了我正在使用的代码（基于此处的其他问题）

现在它对我不起作用，因为间隔和 div 之间没有同步

我尝试了这些步骤但没有成功：60 秒计时器启动，

60 秒后时钟将被删除，其他 div 将显示， 3 秒后，新的 div 显示时钟将再次开始（第二个 div 将消失，......等等

谢谢

    $("#div1").hide();

        var count=5;

        var counter = setInterval(timer, 1000);

        function timer()
        {
          count=count-1;

          if (count <= 0)
          {
            clearInterval(counter);
                $("#div1").fadeIn("slow");
                $("#div1").delay(3000).fadeOut("slow");
                myTimeoutFunction();

             count = 5;
             //counter ended, do something here
             // return;
          }
            console.log(count);
          //Do code for showing the number of seconds here
        }

        function myTimeoutFunction()
        {
            console.log("test");

        }




       });

    </script>
    </head>
    <body>
 <div id="div1">
 3
 </div>

【问题讨论】：

标签： javascript jquery timer intervals clock

【解决方案1】：

counter在调用clearTimeout(counter)后不会出现rest

尝试将.delay()链接到.fadeIn()，使用.fadeOut()的complete回调重置count，counter，调用MyTimeoutFunction

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
  <div id="div1">
    3
  </div>
  <script>
    $("#div1").hide();

    var count = 5;

    var counter = setInterval(timer, 1000);

    function timer() {
      count = count - 1;

      if (count <= 0) {
        clearInterval(counter);
        $("#div1").fadeIn("slow")
          .delay(3000).fadeOut("slow", function() {
            count = 5;
            myTimeoutFunction();
            counter = setInterval(timer, 1000);
          });


        //counter ended, do something here
        // return;
      }
      console.log(count);
      //Do code for showing the number of seconds here
    }

    function myTimeoutFunction() {
      console.log("test");

    }
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

理解：

1 秒行情。
每 5 个滴答声，停止代码，执行 animation-delay-animation 序列，然后重新启动代码。
在周期的某个时间点做某事。

基本的animation-delay-animation序列可以编码为：

$("#div1").fadeIn('slow').delay(3000).fadeOut('slow')

然而，这个问题的有趣部分是“在循环中的某个点做某事”，因为循环提供了几个可以做某事的基点，而不仅仅是问题中指出的那个。为此，您可以选择将 animation-delay-animation 序列实现为 Promise 链，其中序列被拆分为各个组件，从而可以访问基点。

jQuery 的.promise() 方法使编写promise 链变得非常简单。

以下代码提供了一组全面的“做某事”的机会：

var $div1 = $('#div1').hide(),
    count, counter;
function startTicker() {
    // Start of a fresh 5 second countdown - possibly do something here.
    count = 5;
    counter = setInterval(ticker, 1000);
}
function ticker() {
    if (--count <= 0) {
        // Counter ended
        clearInterval(counter);
        doAsynchronousStuff().then(startTicker);
    }
    // Do code for showing the number of seconds here.
}
function doAsynchronousStuff() {
    // Before fadeIn starts - possibly do something here.
    return $div1.fadeIn('slow').promise()
    .then(function() {
        // After fadeIn completes but before delay starts - possibly do something here.
        return $div1.delay(3000).promise();
    })
    .then(function() {
        // After delay but before fadeOut starts - possibly do something here.
        return $div1.fadeOut('slow').promise();
    });
}

startTicker(); // start the cycle

存在其他方法，但 Promise 链避免了回调函数的深度嵌套。

为了使ticker() 更清晰，异步任务出现在一个单独的函数doAsynchronousStuff() 中，该函数返回一个对ticker() 的承诺。因此ticker()能够执行doAsynchronousStuff().then(startTicker)，即调用doAsynchronousStuff()并在所有异步任务完成后开始另一个循环。

【讨论】：