在窗口调整大小时调用JS函数

时间:2014-05-25 22:54:13

标签: javascript modernizr

我是JS的新手,对此问题的任何帮助都非常感谢。

我有以下一点JS:

 var isMobile = false;

    if(Modernizr.mq('only all and (max-width: 1024px)') ) {
        isMobile = true;
    }

 if (isMobile === false)

     /* desired function: */
        slider.ev.on('rsAfterSlideChange', playSlideVideo);
        playSlideVideo();
   }

如果浏览器窗口加载到最大宽度之下或之上,则确实可以正常工作:1024px。问题是,如果用户在页面加载后更改窗口大小,我希望我的函数能够运行或停止。

我该如何设置呢?


这太棒了,谢谢!特别用于解释沿途评论您的代码。我80%在那里。从小窗口到大窗口时脚本工作,但从大到小不起作用。关于我如何解决的任何想法?这是我的所有代码:

        var slider = $(".royalSlider").data('royalSlider'),
              prevSlideVideo,
              playSlideVideo = function() {
                if(prevSlideVideo) {
                  prevSlideVideo.pause();
                }
                var video = slider.currSlide.content.find('video');
                if(video.length) {
                  prevSlideVideo = video[0];
                  prevSlideVideo.play();
                } else {
                  prevSlideVideo = null;
                }

              };




        var $window = $(window); // have a reference to window
        var isMobile = false; // boolean to check for mobile
        var timer = 0;

        function updateSlider() {
            if (!isMobile) {
                /* desired shenanigans: */
                slider.ev.on('rsAfterSlideChange', playSlideVideo);
                playSlideVideo();
            }
        }

        $window.on("resize.slider", function() {
            // delay execution to 300ms after the last resize event
            timer = setTimeout(function() {
                clearTimeout(timer);
                isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
                updateSlider(); // run function on resize
            }, 300);
        }).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();

1 个答案:

答案 0 :(得分:1)

<强>更新

我会怀疑isMobile = Modernizr.mq('only all and (max-width: 1024px)');部分(即使看起来很好)

此外,您似乎正在为滑块小部件分配事件。可能存在多个调整大小事件最终将多个事件“rsAfterSlideChange”附加到滑块的情况。

查看api似乎没有off方法。

所以,记住这一点。你可以试试下面的东西:

var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;

var slider = $(".royalSlider").data('royalSlider'); // slider instance
var prevSlideVideo;
var playSlideVideo = function() {

    if(prevSlideVideo) {
        prevSlideVideo.pause();
    }

    var video = slider.currSlide.content.find('video');

    if(video.length) {
        prevSlideVideo = video[0];
        prevSlideVideo.play();
    } else {
        prevSlideVideo = null;
    }

};


// Looking at the [api](http://dimsemenov.com/plugins/royal-slider/documentation/#api) there doesn't seem to be an ```off``` method. 
// So it is probably safe to attach event only once.

slider.ev.on('rsAfterSlideChange', playSlideVideo);


$window.on("resize.slider", function() {
    // delay execution to 300ms after the last resize event
    timer = setTimeout(function() {
        clearTimeout(timer);

        // quick and dirty check of window width instead of match media, this is unreliable but should do the job for now
        if ($window.width() < 1024) {
            playSlideVideo();
        }

        // updateSlider(); // dont need this anymore as you're calling ```playSlideVideo()``` straight away
    }, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();

有很多方法可以做到。

快速的方式:

var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile

function updateSlider() {
    if (!isMobile) {
        /* desired shenanigans: */
        slider.ev.on('rsAfterSlideChange', playSlideVideo);
        playSlideVideo();
    }
}

$window.on("resize.slider", function() {
    isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
    updateSlider(); // run function on resize
}).trigger("resize.slider"); // trigger this event so you don't have to explicitly call updateSlider();

调整大小事件的有趣之处在于,当调整窗口大小时,它们会多次触发,有很多方法可以限制此事件,下面是单向

var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;

function updateSlider() {
    if (!isMobile) {
        /* desired shenanigans: */
        slider.ev.on('rsAfterSlideChange', playSlideVideo);
        playSlideVideo();
    }
}

$window.on("resize.slider", function() {
    // delay execution to 300ms after the last resize event
    timer = setTimeout(function() {
        clearTimeout(timer);
        isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
        updateSlider(); // run funtion on resize
    }, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();

我没有测试过上面的代码(可能提供一个小提琴?)但是应该让你朝着正确的方向前进。如果有什么不清楚,请告诉我。

祝你好运