1

我想知道以下情况是否可能。假设我有下一个$.resize()功能：

$(window).resize(function(){
    if($(window).width() < 500) console.log('Small');
});

我知道Small只要窗口的大小低于 500，上面的内容就会记录。所以这意味着如果你将窗口的大小从 500 调整到 200，Small则将记录大约 300 次。

好吧，这意味着如果您在这些情况下确实运行了一些繁重的功能，浏览器可能会崩溃，因为它会一遍又一遍地运行，直到您停止调整大小或情况发生变化。

所以这就是为什么我要问是否有办法只在条件第一次出现时运行该假设函数？

4

5 回答 5

4

使用one事件绑定，它只在事件第一次发生时运行传入的函数一次。

$(window).one("resize", function(){
    if($(window).width() < 500) console.log('Small');
});
于 2012-05-14T15:35:15.103 回答
2

这应该工作

$(window).resize(function(){
    // apply whatever you want to do with it, other conditions etc... 
    // regardless of what you want to do, the following line unbinds the resize event 
    // from within the handler.. consider calling this once all your conditions are met
    $(window).unbind("resize");
});

此处理程序执行您的代码，然后resize从window

编辑：删除条件。这段代码的目的只是展示如何调用unbind，应用最适合您的场景的条件

编辑 2：解决其中一条评论，unbind我在上面的代码中呈现的方式，最终将取消绑定resize事件的所有处理程序。更好的方法是在单独的方法中声明事件处理程序，如下所示：

var Window_Resize = function(e) {
   // code goes here
};

$(window).resize(Window_Resize);

并解除绑定，使用这个

$(window).unbind(Window_Resize)

这样，您只需删除该特定处理程序。其他处理程序仍将绑定到此事件。

于 2012-05-14T15:35:21.147 回答
2

您可以one在 jquery 中使用事件处理程序来执行此操作。

http://api.jquery.com/one/

像这样

$(window).one('resize', function(){alert('lol');});
于 2012-05-14T15:36:40.227 回答
1

有两种可能的解决方案。如果您希望处理程序在您第一次调整窗口大小时运行，您可以强制它只运行一次：

$(window).one('resize', function () {
    if ($(window).width() < 500) console.log('Small');
});

但是你有一个问题：它实际上只运行一次。如果他们再次将其调整为大会发生什么？

一种解决方案是引入一个“容差”区域，仅当窗口在特定时间段内调整大小时才运行代码：

var RESIZE_TOLERANCE = 200; // milliseconds

var last_resize = 0;

$(window).resize(function () {
    var current_time = (new Date()).getTime();

    if (current_time - last_resize < RESIZE_TOLERANCE) {
        return; // stop
    }

    last_resize = current_time;

    if ($(window).width() < 500) console.log('Small');
});

这会强制调整大小处理程序每​​秒最多运行五次。如果您愿意，可以更改容差。

然而，想想这种情况：我们从 999px 调整到 998px，触发调整大小处理程序。然后我们在 200ms 结束之前从 998px 调整到 200px。问题是我们错过了调整大小事件。

一个更好的解决方案是跟踪当前的小状态，并且仅在状态发生变化时才执行繁重的代码：

var RESIZE_TOLERANCE = 100; // milliseconds
var SMALL_TOLERANCE = 500; // pixels
var last_resize = 0;
var small = $(window).width() < SMALL_TOLERANCE;

$(window).resize(function () {
    var current_time = (new Date()).getTime();

    if (current_time - last_resize < RESIZE_TOLERANCE) {
        return; // stop
    }

    last_resize = current_time;

    var is_small = $(window).width() < SMALL_TOLERANCE;

    if (is_small !== small) {
        // run expensive code here
        small = is_small;
    }
});

现在容差是 100 毫秒，这意味着我们不会重新计算窗口的宽度。（如果需要，您可以删除或更改它。）我们仅在屏幕状态发生更改时才运行昂贵的代码。我不知道这是否是您正在寻找的，但是如果您的要求略有不同，您将必须具有创造性。

于 2012-05-14T15:47:08.797 回答
0

直截了当的答案是：

$(window).resize(function(){
  if($(window).width() < 500 && !ranfirst) {
    ranfirst = true;
    console.log('Small');
  }
});

这可能不会按照您的想法工作，尽管它确实满足您问题的措辞。您可能会发现需要设置超时来轮询窗口的大小，并ranfirst在大小保持不变 10 秒左右时取消设置。

于 2012-05-14T15:37:24.953 回答