给予休息并重新启动设置间隔

Give break and restart setInterval

本文关键字：设置 重新启动      更新时间：2023-09-26

我有这辆车在休息时旅行。我想要下面这个：

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

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 函数。我已经将"重启"放入其自己的函数中以减少代码重复。注意：我的函数名称故意不好。

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

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

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

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

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

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

这是一个经过测试的工作解决方案，在此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();
});

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

实际上，

如果您希望汽车继续返回其原始位置并再次向右行驶，则无需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);
});

演示;)

相关文章：