Question

我有以下功能，可以在屏幕上设置一些对象：

$interval(function() {
    $('#cloudLeftToRight').animate({
        left: '+=250%',
    }, 7000, function() {
        $('#cloudLeftToRight').removeAttr('style');
        $scope.resetAnimationCloudLeftToRight();
    });
}, 8000);

问题是如果触发app功能，则在8秒后显示第一个动画。延迟。

我想在触发功能后立即运行动画，然后每8秒重复一次动画。

我想到了一个解决方案：

将定时器和动画功能分开，并在init调用后仅动画函数并立即调用定时器函数，其中应传递动画函数的名称。

请问更好的解决方案吗？

非常感谢您的任何建议。

Answer 1

您可以尝试这样的事情：

function myFunction(){
  $('#cloudLeftToRight').animate({
    left: '+=250%',
  }, 7000, function () {
    $('#cloudLeftToRight').removeAttr('style');
    $scope.resetAnimationCloudLeftToRight();
  });  
}

myFunction();
$interval(function () {
  myFunction();
}, 8000);

Answer 2

我认为使用$timeout看起来最干净，并在一个立即调用的函数中递归调用自己：

(function animate() {
    $('#cloudLeftToRight').animate({
            left: '+=250%',
    }, 7000, function () {
        $('#cloudLeftToRight').removeAttr('style');
        $scope.resetAnimationCloudLeftToRight();
    });
    $timeout(animate, 8000);
})()

Answer 3

也许这个伪代码可以帮助你

var runAnim =  function  () { 

     //here animation code 

    $timeout(runAnim, INTERVAL);
    };

    runAnim();

Angular如何在首次运行期间无延迟地使用$ interval？

3 个答案: