0

我setTimeout在递归函数中被调用：

var recursiveTimer = function(duration, data) {
    anotherFunction(data);

    setTimeout(function() {
        // Do stuff with data
        data = {};

        recursiveTimer(duration, data);
    }, duration);
};

这里的问题是 myanotherFunction并不总是被调用。我体验到每隔一次recursiveTimer运行它就会被调用一次。

怎么可能？

编辑：

我anotherFunction()真正做的是，它使用 jQuery 为 dom 元素设置动画。像这样：

$('#slider .slider-loader').find('.bg').css('width', "0%");

currentLoader.find('.bg').animate({
    width: "100%"
}, 3000);

第一行是问题所在。它不是每次都被解雇，而是每隔一次被解雇。

4

2 回答 2

2

根据您的评论和编辑您的问题是.bg仍然动画您观察到的错误行为。

JQuery 存储动画属性的初始值并使用它们直到动画完成。所以设置一个当前动画的css属性是没有效果的。

为避免此问题，您必须在更改设置 css 属性之前停止元素的动画：

$('#slider .slider-loader').find('.bg').stop(true).css('width', "0%");

有两种方法可以用来清除队列jQuery.clearQueue和jQuery.stop

动画时间和超时持续时间的注释。如果您将动画设置为动画的持续时间3000ms也可以持续3010ms（甚至更长），同样如此，setTimeout因此您永远不应该指望它的准确性。

于 2013-07-02T11:05:29.883 回答
1

超时时间和动画一样

你不应该那样做。相反，使用方法complete的回调参数：animate()

var bg = $('#slider .slider-loader').find('.bg');
var recursiveTimer = function(duration, data) {
    bg.animate({
        width: "100%"
    }, 3000, function() {
        // Do stuff with data
        data = {};
        bg.css('width', "0%");
        recursiveTimer(duration, data);
    });
};
于 2013-07-02T11:05:25.737 回答