完成调整大小事件 | CSS-Tricks

如果您习惯使用类似 jQuery UI 可调整大小的东西，您会得到可以在调整大小期间绑定到的事件，以及在调整大小结束时的事件。

原生 JavaScript 中不存在此类事件。

您可以通过设置一个超时来运行您希望在调整大小停止时运行的代码来模拟它。然后在每次调整大小事件触发时清除该超时。这样，只有当超时实际完成时，超时才会完成。

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

类似于去抖动。

Jose Luis Quintana

# 2014年10月6日

是的！
我知道调整窗口大小时的这种后备方案。
非常感谢您的技巧！

zzzzBov

# 2014年10月6日

这种技术称为“去抖动”。如果您碰巧正在使用 underscore，则代码非常简单

$(window).on('resize', _.debounce(function () {
    // Run code here, debounce delay has passed
}, 250));

David Walsh 撰写了关于其工作原理的合理概述.

Chris Coyier

评论永久链接# 2014年10月6日

我在文章末尾提到了它类似于去抖动。但它并不完全相同。去抖动会每（无论）秒运行一次，无论如何，这与“等待完成”略有不同。
zzzzBov

评论永久链接# 2016年3月23日

去抖动会每（无论）秒运行一次，无论如何

您想到的是节流，它会每（无论）秒调用一次函数。去抖动会在调用序列的开头或结尾运行一次，只要它们发生在（无论）秒内，但您已经知道了这一点。

Matt

# 2014年10月7日

嗨，Chris

我在工作中使用了类似的技巧，但有一个小区别：我们不是内联执行代码，而是触发第二个事件（我称之为“calmresize”）。这样，我们就可以在整个站点上附加一个调整大小处理程序，模块可以监听 calmresize 事件。

代码

var FIRE_AFTER = 200, // in ms
        CALM_RESIZE_EVENT = 'calmresize',
        resizeTimeout,
        CalmResize = function () {
            this.bindEvents();
        };

    CalmResize.prototype = {

        bindEvents: function () {
            var $window = $('window');

            $window.on('resize.calm', function () {
                clearTimeout(resizeTimeout);

                resizeTimeout = setTimeout(function () {
                    $window.trigger(CALM_RESIZE_EVENT);
                }, FIRE_AFTER);
            });
        }

    };

    new CalmResize();

希望这对某些人有所帮助。感谢所有代码片段，Chris——您帮我解决了无数问题！

Matt

评论永久链接# 2014年10月7日

抱歉，应该是 $(window)
Sebastian

评论永久链接# 2014年10月16日

嗨，Matt，
我喜欢你的代码片段，想将其集成到 jQuery 插件中。您是否同意，我应该如何署名？

此致，
Sebastian
mrself

评论永久链接# 2015年10月11日

在这里使用原型有什么目的？

Matt

# 2014年10月17日

嗨，Sebastian，很高兴您发现它有用。如果您能署名为 Matt Perry 和 PaperShaker uk.paper-shaker.com，那就太好了。

谢谢

Matt

fcw

# 2015年3月8日

我认为我找到了一个非常简单的解决方案。它也适用于滚动事件，……

$(window).on('resize', function(e)
{
    // do stuff here
    console.log(!e.isTrigger ? ' resize' : ' triggerd');

    if (!e.isTrigger)
    {
        clearTimeout(this._timer);
        this._timer = setTimeout(function(){ $(window).trigger('resize'); }, 250);
    }
});

这很有用，如果您想在调整大小后触发相同的调整大小函数（如果您非常快速地调整大小，有时值不会更新）

Matt

# 2015年3月21日

我在 NPM 上发布了一个 resizeend 事件发射器

https://npmjs.net.cn/package/resize-end

Ken Swarthout

# 2015年6月30日

我是网页开发新手，我正在处理一些代码时遇到了一些麻烦。我需要在窗口调整大小结束时更改 CSS 属性（我认为它是这样称呼的），或者我可以在开始时进行更改。它是 left 属性。我有一个名为 sections 的类，我需要将其设置为 left: 0;。我一直在尝试这样的代码，但没有找到很多有效的代码。我明天会尝试一下，但我有一个快速的问题。我是否需要任何东西才能使此代码正常工作？或者我只需要包含 jQuery？我看到的其他示例根本不起作用。我知道您说过这些函数在原生 Javascript 中不存在，但您可以使用您的代码来模拟它……您的代码是 jQuery 还是 Javascript？我以为它们是两件不同的事情。我认为 jQuery 是用 Javascript 编写的，但实际上并不是 Javascript。它是不同的东西。我只是有点困惑。

Ken Swarthout

# 2015年7月1日

只想感谢您撰写了这篇很棒的文章。我已经成功地将其整合到我的网站中，现在它可以正常工作了。谢谢。

JEYAKUMAR DEVARAJULU

# 2016年2月3日

不错，它节省了我几个小时的生产力……

Csaba Tuncsik

# 2016年3月10日

(function ($) {
    var timer = null;
    $(window).bind('resize.resizeEnd', function () {
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            clearInterval(timer);
            $(window).trigger('resizeEnd');
        }, 250);
    });
})(jQuery);

james

# 2016年3月10日

对于 css3 过渡

$(‘.target’).on(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, _.debounce(function () {
console.log(‘您的代码在此处’)
}, 250));

David

# 2016年5月24日

最佳解决方案在这里
http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac/27923937#27923937

Luca

# 2016年9月26日

它非常优雅有效。太棒了

John

# 2017年3月10日

谢谢这个！

Kamil Naja

# 2017年8月6日

效果很好！谢谢！

Dylan

# 2017年12月5日

我注意到这种方法在“捕获”用户调整大小结束方面并不总是可靠的。我有一个方法使用视口宽度来向项目提要中添加或删除列，我发现通过使用此方法对其进行去抖动，它有时在用户完成调整屏幕大小后不会“捕获”最终的视口宽度。不确定这是否与超时抵消最终窗口状态有关，但它似乎在技术上并不可靠。

Emilio

# 2019年1月22日

Chris，我刚刚在一个我无法使用 lodash 的网站上工作，只有 jQuery，这非常完美和简单。您在久负盛名的 CSS-Tricks 上考虑了如此多令人赞叹的有用事物。我总是可以信任你！

评论

发表评论 取消回复

发表评论取消回复