代码之家 › 专栏 › 技术社区 › DMCS

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

resize window javascript-events jquery

DMCS · 技术社区 · 17 年前

我希望这个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)。

我在他的网站上添加了一条评论,但是他们是有节制的,所以你可能还没有看到。

但无论如何,让我解释一下我的愿望。我希望在用户暂停调整大小和/或完成调整大小时触发“调整大小”类型的事件,而不是虽然用户正在积极拖动浏览器的窗口大小调整手柄。我有一个相当复杂和耗时的resizehandled函数,我需要运行,但不运行100次,仅仅是因为用户将窗口扩大了100像素,并且事件被激发以实现任何像素的移动。我想最好的办法是在用户完成调整后处理它。

7 回复 | 直到 10 年前

Welbog 17 年前

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

例如,当您第一次获得调整大小事件时,将标志设置为“真”,表示用户当前正在调整大小。设置超时,在1秒后调用实际的调整大小事件处理程序。然后,每当此标志为真时,忽略调整大小事件。然后,在实际的处理程序中,一旦完成并更正了所有操作,就将标志设置回false。

这样,您只需每秒处理一次最新的事件(或者根据您的要求,每隔一段时间处理一次)。如果用户在调整大小的过程中暂停,则会进行处理。如果用户完成,它将处理。

这可能不适合您,但是有许多其他的方法可以使用锁,这可能会更有用。

Pim Jager 17 年前

这样的代码怎么样:

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
});

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

James 14 年前

保罗爱尔兰有一个伟大的 Debounced jQuery plugin 这就解决了这个问题。

JrBriones 12 年前

如果您进入了库中,您应该签出下划线,下划线已经可以处理您的需求,并且在您的项目中可能会有更多。

下面是一个关于下划线去磅器如何工作的示例:

// 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

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

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

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

Russ Cam 17 年前

当用户暂停调整大小时,设置超时如何?在调整大小时重置超时,或者在超时时间到期时激发调整大小事件处理程序。

Rahul 17 年前

由于它是内置于jquery中的,您不能将某种oncomplete事件绑定到扩展并传递一个在调用时应该执行的函数吗?

编辑:

当用户开始调整窗口大小时,设置一个观察窗口尺寸的间隔。如果在您的规范的预先设置的时间段内维度没有更改,那么您可以考虑窗口的大小调整为“已完成”。您在此选择的javascript函数是setInterval(),它接受两个参数——一个调用每个标记的函数,以及每个标记用毫秒表示的时间。

关于如何在jquery框架内专门编写它,我对jquery的了解还不够,无法告诉您这一点。也许其他人可以更具体地帮助您,但同时您可以考虑扩展已经与一个oncomplete事件链接的jquery扩展,该事件的工作方式与我刚才描述的类似。

yckart Matthew Crumley 13 年前

我几天前扩展了默认jquery on -事件处理程序。如果在给定的时间间隔内没有触发事件,它会将一个或多个事件的事件处理程序函数附加到所选元素。如果您只想在延迟后启动回调,如调整大小事件或其他,则此功能非常有用。 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));

像其他人一样使用它 在 或 bind -事件处理程序,但可以最后传递一个额外参数:

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

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