setTimeOut , detect end function and activate

Question

With this little function i can move sliders easy and i can insert the time for setTimeOut send the new loop , etc

But i have one problem , you can see the var time , this var indicate the time for run other time setTimeOut and if you see in the animation i have other times for run and show in each slider , the problem it´s i need the time for run setTimeOut start when the animation finish and create the interval of time betwen animations , with this times when run the first slider show the second , etc and i cant show one to one each slider

For example run the first slider and after 8 seconds show the next , etc

var time = 8000;

$(".im_" + id).slideDown().animate({
    height: "300px",
    width: "100%",
}, 1200).delay(4000).fadeOut(1000);

id = (id + 1) % imax;
setTimeout(function() {
    slider(id);
}, time);

I hope understand all , thank´s , the best regards

`$(el).fadeOut` has a complete event if you call `fadeOut` like this: `$(el).fadeOut(1000, function(){setTimeOut(function(){slider(id)}, time);})` you cleanly fire the next slider with a delay after the previous is complete. — megawac, Oct 18 '13 at 14:46

RichieAHB · Answer 1 · 2013-10-18T14:48:53.987

You could always set the the other times as variables such as var delayTime = 4000 and then add them all together to get the real time you would like to wait so:

timeOutDuration = additionalTime + delayTime + animationTime + fadeOutTime

Where additionalTime is your 8 seconds, and use timeOutDuration as opposed to time as the duration for your setTimeout

By the sound of it a callback would be your best bet but I don't totally understand what it is you're trying to do.

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

The jquery slidedown function and the animate function both have callbacks. Wouldn't it work to rewrite

id = (id + 1) % imax;
setTimeout(function() {
    slider(id);
}, time);

as

function slide() {
    id = (id + 1) % imax;
    slider(id);
}

And then just calling that function as the callback of animate?

If you're unaware of what a callback is

edited May 23 '17 at 10:31

Community

1
1

answered Oct 18 '13 at 14:48

Azeirah

6,176
6
25
44

score 0 · Answer 3 · answered Oct 18 '13 at 14:50

As I mentioned in my comment, you can run the next slider by just waiting for the complete event from the last animation. For your example the second slide(id) will be run 8 seconds after the first animation completes.

var time = 8000;

function nextAnimation() {
    setTimeout(function() {
        id = (id + 1) % imax;
        slider(id);
    }, time);
}

$(".im_" + id).slideDown().animate({
    height: "300px",
    width: "100%",
}, 1200).delay(4000).fadeOut(1000, nextAnimation);

jbl · Accepted Answer · 2013-10-18T15:46:24.867

You may go for promise().done see (updated) jsfiddle on divs

var time = 8000;
var imax = 4

function slide(id, firstPass) {
    firstPass &= id !== imax;
    id = id % imax;
    var nextId = (id + 1);
    $(".im_" + id).slideDown().animate({
        height: "300px",
        width: "100%",
    }, 1200).delay(4000).fadeOut(1000);
    if (firstPass) 
        $(".im_" + id).promise().done(function () {
          setTimeout(function () {
              slide(nextId, firstPass);
          }, time)
    });
}


slide(0, true);

setTimeOut , detect end function and activate

4 Answers4