1

我有这辆车在休息时进行巡回演出。我想要这个：

1）它应该驱动到页面的右侧

2）当它到达左边750位置时，它必须停止。

3）暂停5秒

4）暂停后，它必须将自己定位到页面的左侧。

5) 并再次开始驾驶。

http://jsfiddle.net/mjTgB/6/

$(document).ready(function () {
    var showcar;
    showcar = setInterval(function () {
        var difference = $(".car").position().left
        if (difference < 750)
        {
            $('.car').css("left", "+=2px");
        }
        else
        {
            clearInterval(showcar);
            setTimeout(function()
            {
                $('.car').css("left", "-=700px");
                //want to re-start the interval
            },5000);
        }
    }, 10);
});
4

6 回答 6

3 
var showcar;
STARTZOOM();
function STARTZOOM() {
    showcar = setInterval(CARZOOM, 10);
}
function CARZOOM() {
    var difference = $(".car").position().left
    if (difference < 750) {
        $('.car').css("left", "+=2px");
    } else {
        clearInterval(showcar);
        setTimeout(function () {
            $('.car').css("left", "-=700px");
            STARTZOOM();
        }, 5000);
    }
}

就像我在聊天中提到的那样，您只需按照最初调用它的方式重新启动间隔，但不要使用匿名函数，而是使用命名函数。我已将“重新启动”放入其自己的功能中以减少代码重复。注意：我的函数名称是故意不好的。

于 2013-09-18T14:42:12.680 回答
1

一种快速的解决方案是将现有 .ready()函数放入变量中，以便在运行结束时重新执行。

像这样：

$(document).ready(function() {
  var run = function () {
    var showcar;
    showcar = setInterval(function () {
        var difference = $(".car").position().left
        if (difference < 750)
        {
            $('.car').css("left", "+=2px");
        }
        else
        {
            clearInterval(showcar);
            setTimeout(function()
            {
                $('.car').css("left", "-=700px");
                run();
            },5000);
        }
    }, 10);
  }
  run();
});

http://jsfiddle.net/WGJ9g/1/

于 2013-09-18T14:47:04.130 回答
1

您应该将您的处理程序与您的间隔分开，以便您可以重复使用它。

演示：http: //jsfiddle.net/mjTgB/10/

var showcar, interval;

showcar = function () {
    var difference = $(".car").position().left;

    if (difference < 750) {
        $('.car').css("left", "+=2px");
    } else {
        clearInterval(interval); // Clear the interval

        setTimeout(function () {
            $('.car').css("left", "-=700px");
            interval = setInterval(showcar, 10); // Re-assign the interval
        }, 5000);
    }
};

interval = setInterval(showcar, 10); // Initialize
于 2013-09-18T14:53:54.740 回答
0

您必须将间隔放在一个函数中并调用该函数

var showcar;

function myInterval() {
    showcar = setInterval(function () {
        ...
        if (...) {
            ...
        } else {
            clearInterval(showcar);
            setTimeout(function() {
                ...
                myInterval();
            },5000);
        }
    }, 10);
}

myInterval();
于 2013-09-18T14:22:35.283 回答
0

其实如果你想让车子一直回到原来的位置再向右走你就不需要了clearInterval()，你只要把左设置成0px这样

$(document).ready(function () {
    var showcar;
    showcar = setInterval(function () {
        var difference = $(".car").position().left
        if (difference < 750)
        {
            $('.car').css("left", "+=2px");
        }
        else
        {
            //clearInterval(showcar);
            $('.car').css("left", "0px");
        }
    }, 10);
});

演示;)

于 2013-09-18T14:31:57.830 回答
0

据我了解，您希望汽车快速返回起点并继续循环向右行驶的动画。

这是一个经过测试的工作解决方案，可在此jsFiddle上找到：

$(document).ready(function () {
    var showcar;

    function startAnimation() {

        showcar = setInterval(function () {

            console.log(
                'position: ' 
                + $('.car').css("left"));

            var difference = $(".car").position().left;

            if (difference < 750) {
                $('.car').css("left", "+=2px");
            } else {
                $('.car').css("left", "-=700px");

            }
        }, 10);
    }

    startAnimation();

});

*我添加了该职位的控制台日志，以帮助了解正在发生的事情。

于 2013-09-18T14:45:46.223 回答