javascript - setTimeout() 函数不起作用

Question

我希望动画连续工作，但控制台中总会出现错误:“VM1179:1 Uncaught ReferenceError: move is not Define”。不知道为什么...复制下面的代码

$(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() 。

<小时/>

如果您希望四个动画按顺序排列，然后暂停 1 秒，然后一次又一次地重复动画，您可以这样做:

$(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。

P.S. 我注意到你的动画不是对称的，因此它不会返回到开始时的同一位置，因此每次运行时，该对象都会连续向右移动 30px，向下移动 30px以及结束。我不确定这是否是您的意图。