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次只是因为用户将窗口加宽了100px并且事件被激活了所有的移动像素。我想最好的选择是在用户完成调整大小后处理它。

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

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

例如，当您第一次收到resize事件时，请将标志设置为true，指示用户当前正在调整大小。设置超时以在1秒后调用实际的resize事件处理程序。然后，只要此标志为true，请忽略resize事件。然后，在实际的处理程序中，一旦完成所有操作并将其更正，请将标志设置为false。

这样您只能每秒处理一次最新事件（或根据您的要求在某个其他时间段内处理）。如果用户在调整大小的过程中暂停，则会处理。如果用户完成，则会处理。

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

Answer 3

Paul Irish有一个很棒的Debounced jQuery plugin来解决这个问题。

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

然后在窗口调整大小时调用debouncer函数

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

结帐http://underscorejs.org/

中提供的所有下划线功能

Answer 5

如何设置用户暂停调整大小的超时时间？在调整大小时重置超时，或者在超时到期时触发resize事件处理程序。

Answer 6

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

编辑：

当用户开始调整窗口大小时，请设置监视窗口尺寸的间隔。如果尺寸在规格的预设时间段内没有改变，那么您可以考虑调整窗口大小“已完成”。你在这里选择的javascript函数是setInterval（），它接受两个参数 - 一个调用每个tick的函数，以及每个tick以毫秒为单位的时间。

至于如何在jquery框架中专门编写，好吧，我不太了解jquery能告诉你的那些。也许其他人可以更具体地帮助您，但同时您可以考虑扩展已经链接的jquery扩展，其中onComplete事件就像我刚才描述的那样。

Answer 7

我几天前扩展了默认的jQuery on - 事件处理程序。如果在给定间隔内未触发事件，它会将一个或多个事件的事件处理函数附加到所选元素。如果您只想在延迟之后（例如resize事件）触发回调，则此功能非常有用。 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/

拖动调整大小句柄时，javascript调整大小事件多次触发

7 个答案: