setTimeout controls

Question

I am new at jquery and I was wondering what is the best way to make something similar to slideshow which would change pictures and picture button status on itself after interval of time. Until someone will click any of images buttons then auto images changing would stop (after some time it could continue if user wouldn't press any buttons for some time).

$(document).ready(function () {
    function pradinis() {
        setTimeout(doSomething, 4500);
        setTimeout(doSomethingElse, 1500);
        setTimeout(doSomethingUsefulThisTime, 3000);
    }

    function kartojas() {
        setTimeout(doSomething, 4500);
        setTimeout(doSomethingElse, 1500);
        setTimeout(doSomethingUsefulThisTime, 3000);
    }
    var refreshIntervalId = setInterval(kartojas, 5000);
    pradinis();

    $('.item1,.item2,.item3').mouseenter(function () {
        clearInterval(refreshIntervalId);
    });
    $('.item1').click(function () {
        $(".char1").fadeIn("slow");
        $("char1").addClass('active');
        $(".char3,.char2").fadeOut("slow");
        $(".item1").addClass('active');
        $(".item2,.item3").removeClass('active');
    });

    function doSomething() {
        $('.item1').trigger('click');
    };

    function doSomethingElse() {
        $('.item2').trigger('click');
    };

    function doSomethingUsefulThisTime() {
        $('.item3').trigger('click');
    };

    $('.item2').click(function () {
        $(".char1,.char3").fadeOut("slow");
        $(".char2").fadeIn("slow");
        $(".item2").addClass('active');
        $(".item1,.item3").removeClass('active');
    });
    $('.item3').click(function () {
        $(".char2,.char1").fadeOut("slow");
        $(".char3").fadeIn("slow");
        $(".item3").addClass('active');
        $(".item1,.item2").removeClass('active');
    });
});

Up till now I managed to create this https://jsfiddle.net/nq0s16q3/11/ but it's clear that this isn't the best way to do it. Maybe someone have an advice on this? I would really appreciate it, thx in advance.

Answer 1

You will want to use setInterval so that it continually loops your reel until it is cleared. I used a function which takes the class of the active item and gets its number from that. Specify the max number of items and it will automatically loop them. This will also make it so that if you ever add or remove an item, you don't have to change any code beyond the numItems variable at the top.

https://jsfiddle.net/nq0s16q3/15/

Here's the javascript:

var numItems = 3;
var intervalSpeed = 1500;

alternate = function() {
    var activeItem = $('.active');
    $('.item1,.item2,.item3').removeClass('active');
    fadeOutIn(activeItem.attr('class'));
}

fadeOutIn = function(itemClass) {
    var itemNum = parseInt(itemClass.replace('item', ''));
    var nextItemNum = itemNum + 1;
    if(nextItemNum > numItems) {
        nextItemNum = 1;
    }

    $('.char' + itemNum).fadeOut('slow');
    $('.char' + nextItemNum).fadeIn('slow');
    $('.item' + nextItemNum).addClass('active');
}

$(document).ready(function () {
    alternateTimeout = setInterval(alternate, intervalSpeed);

    $('.item1,.item2,.item3').click(function() {
        clearInterval(alternateTimeout);
        var activeItem = $('.active');
        $('.item1,.item2,.item3').removeClass('active');
        $('.' + activeItem.attr('class').replace('item', 'char')).fadeOut('slow');
        $('.' + $(this).attr('class').replace('item', 'char')).fadeIn('slow');
        $(this).addClass('active');
    });
});

Answer 2

You can assign your setTimeout function to a variable and assign it to null when an image button is clicked. Then run a setInterval function that starts the setTimeout function again.

var slideShow = setTimeout(slideFunction, 3000);

//on user click image
slideShow = null;

Something like that