在调整大小事件之前

Question

我想在调整元素大小之前和之后做一些事情,我试图绑定resize事件并且它工作:

$('#test_div').bind('resize', function(){
            // do something
});

我发现了一些问题,但解决方案是timeout,我不想使用timeout.我想立即处理:)

也可以看看:

• JavaScript/JQuery:$(window).resize如何在调整大小完成后触发？

• jQuery - 如何等待'结束'或'调整大小'事件,然后才执行操作？

感谢任何建议:)

Answer 1

没有你可以听的调整大小结束事件.知道用户何时完成调整大小的唯一方法是等到一段短时间过去而不再有调整大小事件.这就是为什么解决方案几乎总是涉及使用a,setTimeout()因为这是了解一段时间过去而没有更多调整大小事件的最佳方式.

我之前的回答是听取.scroll()事件的,但它的概念完全相同.resize():在jquery中处理$(window).scroll函数的更有效方法？并且您可以使用相同的概念进行调整大小,如下所示:

var resizeTimer;
$(window).resize(function () {
    if (resizeTimer) {
        clearTimeout(resizeTimer);   // clear any previous pending timer
    }
     // set new timer
    resizeTimer = setTimeout(function() {
        resizeTimer = null;
        // put your resize logic here and it will only be called when 
        // there's been a pause in resize events
    }, 500);  
}

您可以尝试使用500计时器的值来查看您的喜好.数字越小,调用调整大小处理程序的速度就越快,但随后可能会多次调用.数字越大,发射前的暂停时间越长,但在同一用户操作期间不太可能多次发射.

如果您想在调整大小之前执行某些操作,则必须在第一个调整大小事件上调用函数,然后在当前调整大小操作期间不再调用该函数.

var resizeTimer;
$(window).resize(function () {
    if (resizeTimer) {
        clearTimeout(resizeTimer);   // clear any previous pending timer
    } else {
        // must be first resize event in a series
    }
     // set new timer
    resizeTimer = setTimeout(function() {
        resizeTimer = null;
        // put your resize logic here and it will only be called when 
        // there's been a pause in resize events
    }, 500);  
}