Selfproblemmade Selfproblemmade - 5 months ago 13
Javascript Question

clearTimeout doesn't work in slideshow

I have a full width slideshow. So I have a few problems with it.
One is that

clearTimeout
won't work. If I call the function by a click, it should clear the Timeout.

Does someone know why this won't work? Please explain and show where exactly the problem is.

Thank you and sorry for my bad English.

var index = 0;
var slideSpeed = 1000;
function mainSlider(menuLink){
clearTimeout(slide);
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide);
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
$(document).on('click', '.main_slider_menu_link',function(){
var linkIndex = $(this).index();
mainSlider(linkIndex);
});
function countContentImg(index){
$('#main_slider_selected_img').html('');
var sliderIndex = $('.main_slider_content').length;
for(var i = 0; i < sliderIndex; i++) {
if(i === index)
$('#main_slider_selected_img').append('<li class="main_slider_menu_link main_slider_menu_link_slected"></li>');
else
$('#main_slider_selected_img').append('<li class="main_slider_menu_link"></li>');
}
}
$(document).ready(function(){
countContentImg(index);
mainSlider(false);
});

Oka Oka
Answer

This looks like a scope issue. You're trying to clear a timeout from a variable that doesn't contain a timeout reference yet. Each call to mainSlider creates a new, locally scoped timeout reference, long after you've tried to clear it.

function mainSlider(menuLink){
    clearTimeout(slide); // Clearing a timeout that doesn't exist yet
    if(menuLink !== false){
        alert('You call this function by a click event.');
        clearTimeout(slide); // Clearing a timeout that doesn't exist yet
    }
    var sliderIndex = $('.main_slider_content').length - 1;
    $('.main_slider_content').hide();
    index++;
    if(index > sliderIndex){
        index = 0;
    }
    $('.main_slider_content:eq(' + index + ')').show();
    // Now the timeout exists, but only in the scope of this current call
    var slide = setTimeout(function(){mainSlider(false)}, slideSpeed); 
    setTimeout(countContentImg(index), slideSpeed);
}

Change it to:

var slide;
function mainSlider(menuLink){
    clearTimeout(slide);
    if(menuLink !== false){
        alert('You call this function by a click event.');
        clearTimeout(slide);
    }
    var sliderIndex = $('.main_slider_content').length - 1;
    $('.main_slider_content').hide();
    index++;
    if(index > sliderIndex){
        index = 0;
    }
    $('.main_slider_content:eq(' + index + ')').show();
    // Remove var
    slide = setTimeout(function(){mainSlider(false)}, slideSpeed); 
    setTimeout(countContentImg(index), slideSpeed);
}
Comments