Question

我遇到了一个问题：我想要一个物体从左向右移动每秒1px，但它不起作用，我找不到原因。我在这里读过多个线程，并且完全按照推荐的方式完成。这是我的JS代码。我只是一个迭代器。但整个代码立即执行，浏览器崩溃了！

    $(document).ready(function() {
        var i = 0;
        setTimeout(moveIt(i), 1000);
        function moveIt(i) {
            console.log(i);
            if (i < 10)
                $("#moveObj").css('left', ($("#moveObj").css('left')+1)+"px");
            else if (i >= 10 && i < 20)
                $("#moveObj").css('left', ($("#moveObj").css('left')-1)+"px");
            else
                i = -1;

            i++;
            setTimeout(moveIt(i), 1000);
        }
    });

Answer 1

您需要传递一个将在延迟后执行的功能。见window.setTimeout

setTimeout(function(){
   moveIt(i);
}, 1000);

或者

您可以在延迟

之后传递要执行的一串代码

setTimeout('moveIt('+i+')', 1000);

Answer 2

setTimeout的第一个参数是你的问题，你可以这样做：

setTimeout('moveIt('+i+')', 1000);

第一个参数可以是字符串或函数，如下所示：

setTimeout(function(){ moveIt(i); }, 1000);

但请记住，使用eval情况之一的第一个替代方案并不是一个好习惯。（Eval is evil）

Answer 3

setTimeout需要一个函数（或一个字符串，然后它会评估它并且这不是一件好事）。你可以有一个名为moveIt的函数返回一个函数：

   $(document).ready(function() {
        var i = 0;
        var moveIt=function(i) {
          return function(){
            console.log(i);
            if (i < 10)
                $("#moveObj").css('left', ($("#moveObj").css('left')+1)+"px");
            else if (i >= 10 && i < 20)
                $("#moveObj").css('left', ($("#moveObj").css('left')-1)+"px");
            else
                i = -1;

            i++;
            setTimeout(moveIt(i), 1000);
          };
        }
        setTimeout(moveIt(i), 1000);
    });

JQuery + setTimeout不起作用

3 个答案:

或者