拖动调整大小手柄时多次触发调整大小事件

Question

我希望这个 jQuery 插件能够工作，但它没有：

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie （旧链接是noteslog.com/post/how-to-fix-the-resize-event-in-ie）。

我在他的网站上添加了一条评论，但它们已经过审核，因此您可能还看不到它。

但无论如何，让我解释一下我的愿望。 我希望当用户暂停调整大小和/或完成调整大小时触发“调整大小”类型的事件，而不是在用户主动拖动浏览器的窗口调整大小手柄时触发。 我有一个相当复杂且耗时的 OnResizeHandled 函数，我需要运行，但不能运行 100 次，只是因为用户将窗口扩大了 100 像素，并且每移动一个像素就会触发该事件。 我想最好的选择是在用户完成调整大小后处理它。

Answer 1

像这样的代码怎么样：

function resizeStuff() {
 //Time consuming resize stuff here
}
var TO = false;
$(window).resize(function(){
 if(TO !== false)
    clearTimeout(TO);
 TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds
});

这应该确保函数仅在用户停止调整大小时调整大小。

Answer 2

借鉴并发解决方案的一些想法来管理来自浏览器的大量事件。

例如，当您第一次收到调整大小事件时，将标志设置为 true 指示用户当前正在调整大小。 设置超时以在 1 秒后调用实际的调整大小事件处理程序。 然后，只要该标志为 true，就忽略调整大小事件。 然后，在实际的处理程序中，一旦一切都完成并正确，将标志设置回 false。

这样，您每秒仅处理一次最新事件（或根据您的要求而定的其他时间段）。 如果用户在调整大小的过程中暂停，它将进行处理。 如果用户完成，它将进行处理。

这可能不适合您，但是还有许多其他使用锁的方法可能会更有帮助。

Answer 3

Paul Irish 有一个很棒的 Debounced jQuery 插件 可以解决这个问题。

Answer 4

如果您喜欢图书馆，您应该检查下划线，下划线已经满足您的需求，并且您的项目中可能会有更多。

下面是下划线去抖动器如何工作的示例：

// declare Listener function
var debouncerListener = _.debounce( function(e) {

    // all the actions you need to happen when this event fires

}, 300 ); // the amount of milliseconds that you want to wait before this function is called again

然后只需在调整窗口大小时调用该去抖动器函数

window.addEventListener("resize", debouncerListener, false);

即可检出此处可用的所有下划线函数 http ://underscorejs.org/

Answer 5

当用户暂停调整大小时设置超时怎么样？ 发生调整大小时重置超时，或者在超时到期时触发调整大小事件处理程序。

Answer 6

既然它是用 jQuery 构建的，你不能将某种 onComplete 事件绑定到扩展并传递一个在调用时应该执行的函数吗？

编辑：

当用户开始调整窗口大小时，设置一个观察窗口尺寸的间隔。 如果尺寸在您规范的预设时间段内没有发生变化，那么您可以认为窗口大小调整“已完成”。 您选择的 JavaScript 函数是 setInterval()，它接受两个参数 - 一个调用每个刻度的函数，以及每个刻度需要多长时间（以毫秒为单位）。

至于如何在 jquery 框架内专门编写它，嗯，我对 jquery 的了解还不够，无法告诉你。 也许其他人可以更具体地帮助您，但同时您可以考虑扩展您已经与 onComplete 事件链接的 jquery 扩展，该事件的工作原理就像我刚才描述的那样。

Answer 7

几天前我扩展了默认的 jQuery on-event-handler。 如果在给定的时间间隔内未触发事件，它将一个或多个事件的事件处理程序函数附加到所选元素。 如果您只想在延迟后触发回调（例如调整大小事件），这非常有用。
https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var methods = { on: $.fn.on, bind: $.fn.bind };
    $.each(methods, function(k){
        $.fn[k] = function () {
            var args = [].slice.call(arguments),
                delay = args.pop(),
                fn = args.pop(),
                timer;

            args.push(function () {
                var self = this,
                    arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(self, [].slice.call(arg));
                }, delay);
            });

            return methods[k].apply(this, isNaN(delay) ? arguments : args);
        };
    });
}(jQuery));

像任何东西一样使用它其他 on 或 bind - 事件处理程序，除了您可以传递一个额外的参数作为最后一个：

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

http://jsfiddle.net/ARTsinn/EqqHx/