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

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插件可以解决这个问题.

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/