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

Question

目标

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

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

场景

假设我们有以下数组(在 JavaScript 中):

var ranges = [1024, 1280];

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

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

Playground

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

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

天哪，你是傻子吗？!你的脚本是错误的，因为这里没有打印任何内容。冷静点，伙计! jsFiddle 不会将 $(window) 解释为浏览器的窗口。要运行该函数，您应该调整结果窗口的大小。看:

实际上我在期待什么

基于上面的脚本，我想在视口(viewport)进入 1024px x 1280px 之间的某个宽度时看到 Hi! — < em>一次。当视口(viewport)在外面时，没有任何反应，但是当视口(viewport)再次进入指定宽度时，打印 Hi! — again and once。 p>

我尝试了什么？

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

有疑问？我还没说清楚？

请评论您的问题!

重复？

发布链接或标记为重复——我之前没有看到任何类似的主题(对此感到抱歉)。

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);

它更干净、更有条理、更高效。但实际上并没有什么实质性的改变。