当视口宽度达到某个值时停止/启动窗口调整大小

Question

目标

如果用户的视口达到某个值，我需要停止或启动：

jQuery(window).on('resize'){ // ... }

场景

假设我们有以下数组（在 JavaScript 中）：

var ranges = [1024, 1280];

当用户的视口达到ranges'数组设置的值之间的宽度时，我使用jQuery(window).on('resize'){} 和一些ifs 来执行操作。

但我只想在视口超出或在数组宽度范围内时运行这些“东西”。我的意思是，当用户的视口在1024px x 1280pxof 宽度之间时，jQuery(window).on('resize'){} 应该停止运行，但是当视口超出范围时它需要唤醒以执行我想要的另一件事。

游乐场

为了更好地理解问题，打开您的控制台和take a look in this jsFiddle。

您会看到控制台打印 “Hi”每次 jsFiddle JavaScript 的 Window 的宽度发生变化，我想显示一次。

天啊，你傻吗？！你的脚本是错误的，因为这里没有打印任何东西。冷静点，伙计！ jsFiddle 不会将 $(window) 解释为浏览器的窗口。要运行该功能，您应该调整结果窗口的大小。看：

我所期待的，实际上

根据上面的脚本，我想看到Hi!，就在视口进入1024px x 1280px 之间的某个宽度时——一次。当视口在外面时，什么也没有发生，但是当视口再次进入指定宽度时，打印Hi! — 再次和一次。

我尝试了什么？

实际上，我被困住了。我的大脑无法思考解决方案——我需要一盏灯！

怀疑？我说的还不够清楚？

请评论您的问题！

重复？

发布链接或标记为重复 - 我之前没有看到任何类似的主题（抱歉）。

Answer 1

您只需要跟踪状态即可。这是一个 Fiddle，我认为它可以满足您的需求：

var isInRange = (function() {
    var test = function() {
        return $(window).width() >= 1024 && $(window).width() <= 1280;
    };
    var current = test();
    return function() {
        if (test()) {
            if (!current) {
                current = true;
                console.log('Hi!');
            }
        } else {
            current = false;
        }
    }
}())

$(window).on('resize', isInRange);

---

更新

好吧，在所有这些 cmets 之后，我对编写的代码真的不满意。以下是 another version 的相同想法，清理了一些代码并添加了 onExit 功能：

var isInRange = (function() {
    var $window = $(window);
    var test = function() {
        var ww = $window.width();
        return ww >= 1024 && ww <= 1280;
    };
    var inRange = test();
    var onEnter = function() {
        console.log("Hi");
    };
    var onExit = function() {
        console.log("Bye");
    };
    return function() {
        test() ? (!inRange && (inRange = true) && onEnter())
               : ((inRange && onExit()) || (inRange = false));
    };
}())

$(window).on('resize', isInRange);

它更干净、更有条理、更高效。但没有任何实质性的改变。

Answer 2

您需要使用标志来跟踪状态，我已将您的JSFiddle 更新如下：

var inRange;

function isInRange() {
    if ($(window).width() >= 1024 && $(window).width() <= 1280){
        if (!inRange){
            inRange = true;
            console.log('Hi!');
        }   
    } else {
        inRange = false;
    }
}

$(window).on('resize', isInRange).trigger('resize');

编辑

要根据窗口是在设置范围内还是在设置范围外仅显示一次不同的消息，只需使用如下标志跟踪两个状态：

var inRange, outsideRange;

function isInRange() {
    if ($(window).width() >= 1024 && $(window).width() <= 1280){
        outsideRange = false;

        if (!inRange){
            inRange = true;
            console.log('Hi!');
        }
    } else {
        inRange = false;

        if (!outsideRange){
            outsideRange = true;
            console.log('Bye!');
        }
    }
}

$(window).on('resize', isInRange).trigger('resize');

这是更新后的JSFIddle。

我希望这会有所帮助！

Answer 3

告诉它什么时候去

var min=1024, max=1280, go;//values
$(window).on('resize', function() {//on resize
    var ww = $(window).width();//get window width
    if (go && ww >= min && ww <= max) {//go & in range
        console.log('Hi!');//print 'Hi!'
        go = false;//!go
    } else if (!go && (ww<min || ww>max)) {//!go & out of range
        console.log('Bye!');//print 'Bye!'
        go = true;//go
    }
});

做了一个小提琴：http://jsfiddle.net/filever10/zP39t/