0

setInterval を開始する「sliderFunction」という関数があります。

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 に答える