jQuery - 如何等待'resize'事件的'end'然后再执行一个动作？

Question

所以我目前使用的东西如下:

$(window).resize(function(){resizedw();});

但是在调整大小过程的过程中会多次调用它.是否可以在事件结束时捕获事件？

Answer 1

你可以使用setTimeout()和clearTimeout()

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

关于jsfiddle的代码示例.

Answer 2

我很满意以下建议:http://forum.jquery.com/topic/the-resizeend-event

这是代码,所以你不必挖掘他的帖子的链接和来源:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

感谢sime.vidas的代码!

Answer 3

这是我根据@Mark Coleman回答的代码:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

谢谢马克!

Answer 4

Internet Explorer提供resizeEnd事件.在调整大小时,其他浏览器会多次触发调整大小事件.

这里还有其他很好的答案,展示了如何使用setTimeout和.throttle,来自lodash和下划线的.debounce方法,所以我将提到Ben Alman的油门 - 去抖jQuery插件,它完成了你所追求的.

假设您在调整大小后想要触发此功能:

function onResize() {
  console.log("Resize just happened!");
};

节流示例
在以下示例中,onResize()仅在窗口调整大小期间每250毫秒调用一次.

$(window).resize( $.throttle( 250, onResize) );

去抖动示例
在以下示例中,onResize()仅在窗口大小调整操作结束时调用一次.这与@Mark在他的回答中提出的结果相同.

$(window).resize( $.debounce( 250, onResize) );

Answer 5

使用Underscore.js有一个优雅的解决方案因此,如果您在项目中使用它,您可以执行以下操作 -

$( window ).resize( _.debounce( resizedw, 500 ) );

这应该足够:)但是,如果你有兴趣阅读更多内容,你可以查看我的博客文章 - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore -debounce(deadlink)

Answer 6

在调整大小结束时执行函数的方法比计算两次调用之间的时间差要简单得多，只需这样做：

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(resizedEnded, 500);
});

function resizedEnded(){
    ...
}

相当于Angular2：

private resizeId;
@HostListener('window:resize', ['$event'])
onResized(event: Event) {
  clearTimeout(this.resizeId);
  this.resizeId = setTimeout(() => {
    // Your callback method here.
  }, 500);
}

对于 angular 方法，使用 中的() => { }符号setTimeout来保留作用域，否则您将无法进行任何函数调用或使用this.

Answer 7

您可以将引用ID存储到任何setInterval或setTimeout.像这样:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

要在没有"全局"变量的情况下执行此操作,可以向函数本身添加局部变量.例如:

$(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(doneResizing, 500);
});

function doneResizing(){
  $("body").append("<br/>done!");   
}

Answer 8

一个解决方案是使用函数扩展jQuery,例如: resized

$.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data('resizeTimeout')) {
            clearTimeout($this.data('resizeTimeout'));
        }
        $this.data('resizeTimeout', setTimeout(callback, timeout));
    });
};

样品用法:

$(window).resized(myHandler, 300);