窗口上的Javascript调整大小结束

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了窗口上的Javascript调整大小结束相关的知识,希望对你有一定的参考价值。

我在调整窗口大小时调用一个函数:

window.addEventListener("resize", calculateDimensions());

但是我需要一种方法在调整窗口大小后调用不同的函数。有没有办法使用本机js(而不是jquery)实现这一点

TIA

答案

您可以设置超时并在再次触发调整大小时重置它。因此,最后一次超时未被取消,并且该功能已运行:

function debounce(func){
  var timer;
  return function(event){
    if(timer) clearTimeout(timer);
    timer = setTimeout(func,100,event);
  };
}

可以像这样:

window.addEventListener("resize",debounce(function(e){
  alert("end of resizing");
}));
另一答案

我喜欢Jonas Wilms漂亮的小去抖功能,但是我认为将去抖时间作为一个参数更好。

// Debounce
function debounce(func, time){
    var time = time || 100; // 100 by default if no param
    var timer;
    return function(event){
        if(timer) clearTimeout(timer);
        timer = setTimeout(func, time, event);
    };
}

// Function with stuff to execute
function resizeContent() {
    // Do loads of stuff once window has resized
    console.log('resized');
}

// Eventlistener
window.addEventListener("resize", debounce( resizeContent, 150 ));
另一答案

使用window.addEventListener("resize", calculateDimensions);

calculateDimensions()表示您执行该函数,然后将该结果用作回调函数。

以上是关于窗口上的Javascript调整大小结束的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript:如何调整div.card的大小

媒体查询断点上的 CSS 重置值(调整窗口大小或方向更改)

出现键盘后调整活动大小

css有用的代码片段

何时使用“带有(... ms)延迟的JavaScript窗口调整大小事件”是有益的

JavaScript 窗口大小调整事件