0

我有一个名为“sliderFunction”的函数，它启动一个 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();

函数“stopSlider”工作得很好，因为它与“autoSlider”在同一个函数中。当我尝试在“sliderFunction”之外执行“clearInterval(inter)”时，出现此错误：

Uncaught ReferenceError: inter is not defined

我尝试通过将 'var' 留在外面来使 'inter' 全局化，但是当函数第一次加载时出现错误。

有任何想法吗？

4

2 回答 2

2

只需删除：

var inter;

你就完成了。为了安全起见，您可以这样做：

window.inter=null;
于 2012-10-28T20:40:25.983 回答
1

那是因为inter只存在于 sliderFunction 范围内。由于这两个函数都在该范围内，因此它们都可以访问该变量，但在 sliderFunction 之外您不能。

解决方案？更改 stopSlider 的声明：

this.stopSlider = function() { 
 ...

然后，保存 sliderFunction 函数的结果：

var slider = sliderFunction();

现在，您可以使用该结果来调用该函数：

slider.stopSlider();

您已经有效地将sliderFunction 转换为具有名为stopSlider 的方法的对象。

于 2012-10-28T20:39:37.693 回答