递归setTimeout导致不一致的行为

Question

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

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

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

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

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

怎么可能？

编辑 ：

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

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

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

第一行是问题所在。 它不是被解雇每一次，只有每个其他时间。

Answer 1

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

JQuery存储已设置动画的属性的初始值，并使用它们直到完成动画为止。 因此，设置当前动画的css属性无效。

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

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

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

动画时间和超时时间的注释。 如果设置了动画的持续时间3000ms动画也可能会持续3010ms （甚至更长时间），同样适用于setTimeout ，所以你永远不应该在它的准确性计数。

Answer 2

超时与动画相同

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

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);
    });
};