Question

我有这辆车在休息时间游览。我想要这个：

1）它应该开到页面的右侧

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

3）暂停5秒

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

5）并再次开始驾驶。

$(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);
});

Answer 1

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);
    }
}

像我在聊天中提到的那样，你需要以你最初调用它的方式重启间隔，但是使用命名函数代替anon函数。我已将'restart'放入其自己的函数中以减少代码重复。注意：我的函数名称故意不好。

Answer 2

一个快速的解决方案是将现有的 .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/

Answer 3

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

演示：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

Answer 4

你必须把间隔放在一个函数中并调用该函数

var showcar;

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

myInterval();

Answer 5

实际上，如果您希望汽车继续返回其原始位置并再次向右移动，则您不需要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);
});

DEMO;）

Answer 6

根据我的理解，你希望汽车快速返回到开始并继续将它的动画循环到右边。

以下是经过测试的有效解决方案，可在此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();

});

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

中断并重新启动setInterval

6 个答案: