Question

I have a function called ‘sliderFunction’ that starts a setInterval:

function sliderFunction() {

    var inter;

    function autoSlider() {
        var cur_img_div_pos = $('.img_slider.in_view').attr('data-pos');
        var num_img = $('.img_slider').length;
        var play_icon = $('#play_icon');

        play_icon.attr('data-active', '1');

        if (inter) {
            clearInterval(inter);
        }

        inter = setInterval(function(){         
            var pos = parseInt(cur_img_div_pos) + 1;
            var limit = parseInt(num_img) - 1;

            slider(pos, num_img);

            if (cur_img_div_pos < limit) {
                cur_img_div_pos++;
            } else {
                cur_img_div_pos = 0;
            }
            console.log(pos);
        }, 5000);
        console.log('start');
    }

    function stopSlider() {     
        var play_icon = $('#play_icon');
        var pause_icon = $('#pause_icon');
        var pause_active = pause_icon.attr('data-active');

        if (pause_active == 0) {
            play_icon.attr('data-active', '0');     
            pause_icon.attr('data-active', '1');
            clearInterval(inter);
            showButton('pause_icon');
            console.log('stop');
        }
    }

    function showButton(bt_id) {
        // bt_id -> pause_icon or play_icon
        var button = $('#' + bt_id);            
        button.fadeIn()
            .queue(function() {
                $(this).delay(1000).fadeOut().removeAttr('style');
                $(this).dequeue();
            });
    }

    var cur_img_div_pos = $('.img_slider.in_view').attr('data-pos');

    autoSlider(cur_img_div_pos);

    $(document).on('click', '.thumbs_anchor', function() {  
        if (inter) {
            stopSlider();
        }           
    });

    $(document).on('mouseenter', '.img_slider_inner', function() {  
        stopSlider();
    });

    $(document).on('mouseleave', '.img_slider_inner', function() {  
        var play_icon = $('#play_icon');
        var pause_icon = $('#pause_icon');          
        var play_active = play_icon.attr('data-active');

        if (play_active == 0) {
            play_icon.attr('data-active', '1');     
            pause_icon.attr('data-active', '0');
            autoSlider(cur_img_div_pos);
            showButton('play_icon');
        }
    });

}

sliderFunction();

Function ‘stopSlider’ works just fine because it is in the same function with ‘autoSlider’. When I’m trying to execute ‘clearInterval(inter)’ outside ‘sliderFunction’, I get this error:

Uncaught ReferenceError: inter is not defined

I tried make ‘inter’ global by leaving ‘var’ outside but I get an error when the function loads for the first time.

Any ideas?

Answer 1

Just remove:

var inter;

and you’re done. To be safe you can do this:

window.inter=null;