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属性无效。

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

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

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

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

Answer 2

超时与动画相同

你不应该这样做。相反，请使用animate() method的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);
    });
};

javascript - 递归setTimeout导致行为不一致

2 个答案: