Question

我有一个名为'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'全局化，但是当函数第一次加载时我得到一个错误。

有什么想法吗？

Answer 1

只需删除：

var inter;

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

window.inter=null;

Answer 2

那是因为inter仅存在于sliderFunction范围内。由于两个函数都在该范围内，因此它们都可以到达该变量，但在sliderFunction之外则不能。

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

this.stopSlider = function() { 
 ...

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

var slider = sliderFunction();

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

slider.stopSlider();

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

在其功能之外停止setinterval

2 个答案: