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

Question

目标

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

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

场景

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

var ranges = [1024, 1280];

当用户的视口在jQuery(window).on('resize'){}'数组设置的值之间增加宽度时，我正在使用ranges内部的ifs来执行操作。

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

游乐场

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

你会看到控制台打印出来 每次jsFiddle JavaScript窗口的宽度发生变化时，“嗨”，我想显示一次。

天哪啊，你真傻吗？！你的脚本错了，因为这里没有打印。 冷静下来，伙计们！ 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);

---

更新

好的，在所有这些评论之后，我对编写的代码感到非常满意。这是 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/