Question

好的，所以我对jQuery没有多少经验。我在这里要做的是让页面的背景每5秒更改一次（实际上是10秒，但是5个是用于测试）。与此同时，我想要一个倒计时动画，就像页面下方的栏一样。我的背景每5秒钟就会改变一次，但我不能让酒吧动画工作。它只发生一次或两次，但之后再也不会发生：////

这是条形动画的代码

var initialWidth = 0;
var initialHeight = 0;

var firstMeasurements = function(){
  initialHeight = $(".countdown").height() + "px";
  initialWidth = $(".countdown").width() + "px";
}

$(function(){
        var bar = $(".countdown");

        function countdown() {
              bar.animate({"width":"0px"}, 5000);
        }

        function restartCountdown() {
              bar.css("width", initialWidth);
              countdown();
              setTimeout(restartCountdown, 5000);
        }

        bar.css("height", initialHeight);
        restartCountdown();
});

“倒计时”是我想要每5秒制作动画的div类。

有人可以告诉我我的代码有什么问题吗？谢谢。

Answer 1

这里你去...这应该足以让你开始：）

var time = 3000, //3 seconds
var timer = setInterval(function(){ 
    alert("Hello"); 
}, time);

//Why declare the interval as timer var?
//Because you may wish to cancel it at some point by doing
//clearInterval(timer);

Answer 2

而不是：

setTimeout(restartCountdown, 5000);

您应该使用：

setInterval(restartCountdown, 5000);

因为setTimeOut()只会触发一次，但setInterval()将始终每5秒触发一次。

注意：

在您的情况下，您以递归方式调用restartCountDown()，因此如果您使用setInterval()，则需要将功能更改为以下内容：

function restartCountdown() { bar.css("width", initialWidth); setInterval(countdown, 5000); }

这样，您将初始化宽度，然后在5秒后触发countdown()。

Answer 3

以下是完整的代码LIVE DEMO

$(function () {
        var firstMeasurements = {
            width: $("#countdown").css('width'),
            height: $("#countdown").css('width')
        }
        var startAnim = function () {
            $("#countdown").animate({
                "width": "0px", "height": "0px"
            }, 5000, resetAnim)
        }
        var resetAnim = function () {
            $("#countdown").css({
                "width": firstMeasurements.width,
                "height": firstMeasurements.height
            });
            startAnim();
        }
        startAnim()
    });

Answer 4

OHOH。每隔N秒的问题;）

实际上今天你只能使用`setTimeInterval``

setInterval(function(){ 
    console.log("5 secs have passed"); 
}, 5000/*5000 ms=5 seconds*/);

但要小心！您的Javascript在setInterval期间无法执行任何其他操作。浏览器javascript在单个线程中运行。因此，如果您执行的操作需要太长时间 - 它会冻结浏览器。

Javascript的未来将带来多线程。

为了能够在等待5秒钟期间执行操作，我使用了异步请求等策略。好吧，可以自由地询问你是否不想在5秒内被冻结。

有些读物？ http://ejohn.org/blog/how-javascript-timers-work/

如何使用jQuery每5秒钟生成一个动画？

4 个答案: