CODEWITHSUNDEEP
javascriptjqueryhtmlcss
codin freak
codin freak

Reputation: 287

Give break and restart setInterval

I have this car making tours with breaks. I want this below:

1) It should drive to the right side of the page

2) when it reaches 750 position left, it must stop.

3) pause 5 seconds

4) after pause, it must position itself to the left side of the page.

5) and start driving again.

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

Upvotes: 1

Views: 187

Answers (6)

itiel
itiel

Reputation: 17

Actually if you want the car to keep returning to its original position and going to the right again you don't need to clearInterval(), you just set left to 0px like this

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

Upvotes: 0

svidgen
svidgen

Reputation: 14302

One quick solution is to drop the existing .ready() function in a variable for re-execution at the end of the run.

Like so:

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

Upvotes: 1

iConnor
iConnor

Reputation: 20199

You should seperate your handler from your interval, so you can re-use it.

Demo: 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

Upvotes: 1

ljs.dev
ljs.dev

Reputation: 4493

As I understand it, you want the car to return towards the start quickly and continue to loop the animation of it driving to the right.

Here is a tested, working solution, available on this 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();

});

*I added a console log of the position to help understand what is happening.

Upvotes: 0

rlemon
rlemon

Reputation: 17666

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

like I mentioned in the chat, you need to just restart the interval the same way you originally called it, but instead of an anon function use a named function. I have put the 'restart' into its own function to reduce the code duplication. Note: my function names are intentionally bad.

Upvotes: 3

Panos Bariamis
Panos Bariamis

Reputation: 4653

you have to put the interval in a function and call that function

var showcar;

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

myInterval();

Upvotes: 0

Related Questions