窗口调整大小结束时的Javascript答案

【问题标题】：Javascript on window resize end窗口调整大小结束时的Javascript
【发布时间】：2018-02-04 21:45:24
【问题描述】：

当窗口像这样调整大小时，我正在调用一个函数：

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

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

TIA

【问题讨论】：

你可能想传递一个函数而不是函数的结果？
检查this out

标签： javascript resize window

【解决方案1】：

你可以设置一个 Timeout 并在 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");
}));

【讨论】：

对不起，如果我不清楚，但我想在窗口调整大小时调用 calculateDimensions，并且在调整大小结束后调用不同的函数，我将如何使用你的好例子来实现这一点？谢谢！
@ronny vdb 你已经有一个计算维度监听器。添加上面的代码，把其他函数代替上面的警报，你就完成了......
我知道，操作员已经有了答案，但是为了以后的参考，我想添加一个代码笔 - codepen.io/dcorb/pen/XXPjpd Source - css-tricks.com/debouncing-throttling-explained-examples

【解决方案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 ));

【讨论】：

同意，前两行可以改写为function debounce(func, time = 100){。

【解决方案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);
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

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