Question

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

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

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

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

这就是为什么我在问第一次出现这种情况时是否有办法运行该假设函数？

Answer 1

使用仅在第一次出现事件时运行传入函数的one事件绑定。

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

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

这样您只需删除该特定处理程序。其他处理程序仍然会受到此事件的约束。

Answer 3

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

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

像这样

$(window).one('resize', function(){alert('lol');});

Answer 4

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

$(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。问题是我们错过了resize事件。

更好的解决方案是跟踪当前的小状态，只有在状态发生变化时才执行重码：

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毫秒，这意味着我们不会重新计算窗口的宽度。（如果需要，可以删除它或更改它。）如果屏幕状态发生变化，我们只运行昂贵的代码。我不知道这是否是你想要的，但如果你的要求略有不同，你必须要有创意。

Answer 5

直截了当的回答是：

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

这可能不会像你想象的那样起作用，虽然它确实能满足你的问题的措辞。您可能会发现需要设置超时以轮询窗口大小，并在大小保持不变10秒左右时取消设置ranfirst。

仅在第一次出现窗口大小时运行命令

5 个答案: