jquery 调整窗口大小时调用函数

zsohkypk  于 2023-06-22  发布在  jQuery
关注(0)|答案(5)|浏览(167)

当浏览器窗口调整大小时,我如何调用这个(或任何)JS函数再次运行?

<script type="text/javascript">
 function setEqualHeight(e) {
     var t = 0;
     e.each(function () {
         currentHeight = $(this).height();
         if (currentHeight > t) {
             t = currentHeight
         }
     });
     e.height(t)
 }
 $(document).ready(function () {
     setEqualHeight($(".border"))
 })
</script>
mrphzbgm

mrphzbgm1#

你可以使用window onresize事件:

window.onresize = setEqualHeight;
axkjgtzd

axkjgtzd2#

您可以订阅window.onresize事件(See here

window.onresize = setEqualHeight;

window.addEventListener('resize', setEqualHeight);
6jygbczu

6jygbczu3#

这段代码将添加一个计时器,在窗口调整大小后200毫秒后调用resize函数。这将减少对方法的调用。

var globalResizeTimer = null;

$(window).resize(function() {
    if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
    globalResizeTimer = window.setTimeout(function() {
        setEqualHeight();
    }, 200);
});
yuvru6vn

yuvru6vn4#

您使用jquery,因此使用.resize()方法绑定它。

$(window).resize(function () {
    setEqualHeight( $('#border') );
});
wztqucjr

wztqucjr5#

JavaScript最近增加了对ResizeObserver API的支持,它允许你将回调绑定到任何特定的元素(如果你想针对特定的元素,即使整个页面都没有调整大小,这也是非常有用的);但是,您也可以通过传入根元素来使用它以整个文档为目标。

const resizeObserver = new ResizeObserver((entries, observer) => {
  // if necessary, you can do something with the entries which fired the event, 
  // or the observer itself (for example stop observing an element)
  setEqualHeight();
});

//to attach to the whole document
resizeObserver.observe(document.documentElement);

//to attach to specific target element(s)
resizeObserver.observe(document.querySelector(".container"));

相关问题