setTimeout（）函数不起作用

Question

我希望动画能够连续工作，但是控制台中始终会出现错误：“ VM1179：1 Uncaught ReferenceError：未定义移动”。 不知道为什么...复制下面的代码

$(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() 。 这只是一个坏习惯，应该几乎总是避免并且总是可以避免。 但是，a，您似乎在这里甚至都不需要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() ，它将在1000ms内再次调用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 ）中选择函数，但是由于您是在document.ready参数函数内定义move() ，因此它不会进入全局范围。

解决方案是直接使用对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();

});