Question

I can't for the life of me see why my setInterval() function is only executing one time. I believe I am doing it right according to its usage. It's a slideshow script that takes a group of slides as part of a slideshow object called TheBand and changes slides using setInterval().

This is the timer:

    current_band.obj_timer = window.setInterval(function () {
         TheBand.nextSlide(current_band_id);
    }, current_band.timer);

This is the nextSlide function:

    nextSlide : function (band_id) {

    var obj_band = TheBand.bands[band_id];

    if (band_id == 0) {
        console.log(obj_band.current_slide, obj_band.slide_count)
    }

    if (obj_band.current_slide + 1 >= obj_band.slide_count) {
        new_slide = 0;
    } else {
        new_slide = obj_band.current_slide + 1;
    }

    TheBand.changeSlide(band_id, new_slide);
},

Then the changeSlide function:

    changeSlide : function (band_id, slide_id) {

    var obj_band = TheBand.bands[band_id];

    if (slide_id != obj_band.current_slide) {

        // Get the viewport width for display purposes
        var slide_width = jQuery(obj_band.viewport).width();

        // Set up the slide objects
        var current_slide = jQuery(obj_band.slides[obj_band.current_slide]);
        var new_slide = jQuery(obj_band.slides[slide_id]);

        // Set the left value for the new slide and show it
        new_slide.css('left', slide_width).width(slide_width).height(obj_band.max_height);
        new_slide.show();

        // Animate the slide transition
        current_slide.animate({ left: -slide_width }, obj_band.transition_time);
        new_slide.animate({ left: 0 }, obj_band.transition_time, 'swing');
        if (new_slide.css('background-color') != current_slide.css('background-color')) {
            jQuery(obj_band.back).animate({ backgroundColor : new_slide.css('background-color') }, obj_band.transition_time);
        }

        // Set the class for the nav buttons
        jQuery(obj_band.nav_buttons[obj_band.current_slide]).removeClass('selected');
        jQuery(obj_band.nav_buttons[slide_id]).addClass('selected');

        // Run the slide javascript - be careful with this!
        eval(obj_band.slide_script[obj_band.current_slide].unload);
        eval(obj_band.slide_script[slide_id].load);

        window.setTimeout(function () {
            eval(obj_band.slide_script[slide_id].ready);
        }, obj_band.transition_time);

        // Set the current slide variable
        obj_band.current_slide = slide_id;

        // Set the correct Nav color
        TheBand.setNavColor(band_id);

    }

},

Seems simple enough, but I only get to the second slide!? No errors or warnings in console and if I watch the clear timer breakpoint it does show a clear timer event, but its not from this code... Please help?

P.S. The setInterval() timer does not break if I comment out the changeSlide function.

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top