JavaScript 在窗口调整大小结束时

Question

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

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

但我需要在窗口大小调整后调用不同的函数。 有没有使用本机JS（而不是jquery）实现这一点的方法？

TIA

- Ronny vdb

---

你可能想传递一个函数而不是函数的结果？ - Jonas Wilms

请查看这个链接。 - Srichandradeep C

相关内容：https://dev59.com/0G035IYBdhLWcg3wVeXn - djvg

Answer 1

你可以设置一个超时时间，在 resize 事件再次触发时重置它。这样上一个超时时间不会被取消，函数将会运行：

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

---

抱歉如果我表达不清楚，我的意思是当窗口大小改变时调用calculateDimensions函数，一旦调整大小结束后再调用另一个函数，我该如何使用你的示例来实现这个功能呢？谢谢！ - Ronny vdb

@ronny vdb，你已经有一个计算尺寸的监听器了。添加上面的代码，将另一个函数放在上面的警报框中，就完成了... - Jonas Wilms

我知道，楼上已经得到了答案，但为了以后的参考，我想添加一个 CodePen - https://codepen.io/dcorb/pen/XXPjpd 来源-https://css-tricks.com/debouncing-throttling-explained-examples/ - Varun

Answer 2

我喜欢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 ));

- Anas

---

同意，而且前两行可以重写为function debounce(func, time = 100){。 - ACJ

Answer 3

使用 npm 的 debounce 包：

npm i debounce

const debounce = require('debounce');
window.onresize = debounce(resize, 200);

function resize(e) {
  console.log('height', window.innerHeight);
  console.log('width', window.innerWidth);
}

- Sajjad Shirazy

Answer 4

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

calculateDimensions() 意味着你执行该函数，然后将其结果用作回调函数。

- Michael Schmidt

---

虽然这是真的，但它并没有回答问题。这只是一个评论... - Jonas Wilms