Question

我希望动画能够连续工作，但在控制台中总会出现错误：＆＃34; VM1179：1未捕获的ReferenceError：未定义移动＆＃34;。不知道为什么......复制下面的代码

$(document).ready(function(){

    function move(){
        $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"});
        setTimeout('move()',1000);
    }
    move()
})

Answer 1

您似乎根本不需要setTimeout()。

假设你想要的是yoru动画循环并反复重复，正确的方法是使用.animate()的完成回调而不使用setTimeout()。你可以这样做：

$(document).ready(function(){

    function move(){
        $("#block").animate({left:"+=50px" },1000)
                   .animate({top:"+=50px"},1000)
                   .animate({left:"-=20px"},1000)
                   .animate({top:"-=20px"}, 1000, move);
    }
    // call it the first time
    move();
});

jQuery将自动为您排序四个动画。

你想知道的是，当最后一个完成时，你可以重新开始整个事情。您可以使用上一次.animate()操作中的完成功能，让它再次调用move()。因为这个回调被称为异步，所以堆栈上没有堆栈构建或递归构建，这可以很快地运行。

作为解释，您的setTimeout()无法正常工作，因为当您将字符串作为第一个参数传递给setTimeout()时，该字符串将在全局范围内进行评估，而您没有move()函数在全局范围内，因此未找到并且没有执行任何操作。如果您在setTimeout(move, 1000)中传递一个普通的Javascript函数引用，则在当前作用域中评估函数引用（甚至在进行setTimeout调用之前）并正确传递该函数引用。您几乎不应该将字符串传递给setTimeout()。这只是一个坏习惯，几乎总是应该避免，并且总是可以避免。但是，唉，看来你甚至不需要setTimeout()。

如果您希望四个动画一个接一个地排序，然后暂停一秒钟，然后一次又一次地重复动画，您可以这样做：

$(document).ready(function(){

    function move(){
        $("#block").animate({left:"+=50px" },1000)
                   .animate({top:"+=50px"},1000)
                   .animate({left:"-=20px"},1000)
                   .animate({top:"-=20px"}, 1000, function() {
                       setTimeout(move, 1000);
                   });
    }
    // call it the first time
    move();
});

这里，匿名函数作为完成回调传递给最后一个动画。在该完成功能中，运行setTimeout()将在1000毫秒内再次调用move。

PS 我注意到你的动画并不是对称的，因此它不会返回到它开始的同一个位置，因此每次运行时，对象将向右移动30px，向下移动30px并结束。我不确定这是不是你想要的。

Answer 2

我发现你的脚本运行良好。但你可以这样做。

$(document).ready(function(){
    move();
});

function move(){
        $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"});
        setTimeout('move()',1000);
}

Answer 3

使用字符串作为参数时，例如

setTimeout('move()',1000);

setTimeout从全局作用域中选择函数（在您的情况下为window），但由于您在move()参数函数中定义了document.ready，因此它不是走向全球范围。

解决方案是直接使用move函数的引用作为setTimeout的参数：

setTimeout(move, 1000);

这样它就从存在函数的本地范围中选择它。

Answer 4

贬低的答案是正确的。 setTimeout接受一个函数值（一个未被激活的函数），而不是像你一样的被调用函数： setTimeout('move()',1000);

试试这个： setTimeout(move,1000);

Answer 5

要在每秒可以使用的情况下调用一个函数。

<script type="text/javascript">
        $(document).ready(function(){

            function move(){
                console.log("Called");
                $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"});

            }

            window.setInterval(function(){
              move()
            }, 1000);
        })
    </script>

然后检查你的控制台，

Answer 6

以下是您需要看到的内容：

$(function(){

function ba(){
   $('#block').animate({left:'+=50px' }, 1000).animate({top:'+=50px'}, 1000).animate({left:"-=20px"}, 1000).animate({top:'-=20px'}, 1000);
}
function move(){
  ba();
  setTimeout(ba, 1000);
}
move();

});

setTimeout（）函数不起作用

6 个答案: