调整大小过程时,jQuery resize事件被多次调用

时间:2014-03-19 11:11:21

标签: javascript jquery resize slider

SettingsSlider调整大小事件可能会发生数百次,只是为了进行小幅度的改变而且我不知道如何做到正确。

http://jsfiddle.net/bzTna/

horizontalslider: function (){

        var startnum = 0,
        mySlider, mySlider2, mySlider3, mySlider4, mySlider5, mySlider6, mySlider7, mySlider8, settings1 = {


        }, settings2 = {

        };

        function settings() {
            return ($(window).width() < 800) ? settings1 : settings2;
        }

        mySlider2 = $('.one').bxSlider(settings());
        mySlider3 = $('.two').bxSlider(settings());
        mySlider4 = $('.three').bxSlider(settings());
        mySlider5 = $('.four').bxSlider(settings());
        mySlider6 = $('.five').bxSlider(settings());
        mySlider7 = $('.six').bxSlider(settings());
        mySlider8 = $('.seven').bxSlider(settings());
        mySlider = $('.eight').bxSlider(settings());

        function SettingsSlider() {
            mySlider.reloadSlider($.extend(settings(), {
                startSlide: mySlider.getCurrentSlide()
            }));
            mySlider2.reloadSlider($.extend(settings(), {
                startSlide: mySlider2.getCurrentSlide()
            }));
            mySlider3.reloadSlider($.extend(settings(), {
                startSlide: mySlider3.getCurrentSlide()
            }));
            mySlider4.reloadSlider($.extend(settings(), {
                startSlide: mySlider4.getCurrentSlide()
            }));
            mySlider5.reloadSlider($.extend(settings(), {
                startSlide: mySlider5.getCurrentSlide()
            }));
            mySlider6.reloadSlider($.extend(settings(), {
                startSlide: mySlider6.getCurrentSlide()
            }));
            mySlider7.reloadSlider($.extend(settings(), {
                startSlide: mySlider7.getCurrentSlide()
            }));
            mySlider8.reloadSlider($.extend(settings(), {
                startSlide: mySlider8.getCurrentSlide()
            }));
        }
        $(window).resize(SettingsSlider);

},

1 个答案:

答案 0 :(得分:0)

是多次调整事件调用大小,直到您停止调整浏览器大小。为了防止是&amp;只有在javascript中使用clearTimeOut()方法才能调用它。

var timer;
$(window).resize(function(e){

    clearTimeOut(timer);
    timer = setTimeOut(your_method(),100);

});

function your_method(){
    // Your Code
}

将您的SettingsSlider方法更改为

function SettingsSlider() {
                mySlider.reloadSlider(settings());
                mySlider2.reloadSlider(settings());
                mySlider3.reloadSlider(settings());
                mySlider4.reloadSlider(settings());
                mySlider5.reloadSlider(settings());
                mySlider6.reloadSlider(settings());
                mySlider7.reloadSlider(settings());
                mySlider8.reloadSlider(settings());
            }