javascript - 调用 JS 函数来调整窗口大小

Question

我对 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();
   }

如果浏览器窗口加载低于或高于 max-width: 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();

Answer 1

更新

我怀疑 isMobile = Modernizr.mq('only all and (max-width: 1024px)'); 部分(尽管看起来不错)

此外，您似乎正在将事件分配给 slider 小部件。可能存在这样的情况:多个调整大小事件最终会将多个事件“rsAfterSlideChange”附加到 slider 。

查看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();

我还没有测试上面的代码(也许提供一个 fiddle ？)但应该让你朝着正确的方向前进。如果有任何不清楚的地方请告诉我。

祝你好运