跨浏览器窗口调整大小事件 - JavaScript / jQuery

在这里是一种非jQuery的方式来调用调整大小事件：

window.addEventListener('resize', function(event){
  // 在这里执行操作
});

它适用于所有现代浏览器。它不会为你进行任何节流操作。[这里是一个示例](http://codepen.io/jondlm/pen/doijJ)。

这种解决方案在IE中不起作用。修复版本支持IE DOM：[stackoverflow.com/questions/6927637/…](http://stackoverflow.com/questions/6927637/...)。

> 它不会为你进行任何节流操作。你能详细说明一下吗？它应该/会对什么进行节流？这是否与事件连续多次触发有关？

通常，当你监听一个触发非常频繁的事件时，你会希望对其进行节流操作，以避免在程序中造成瓶颈。你可以使用[debounce](https://lodash.com/docs/4.17.4#debounce)（例如lodash）来实现节流操作。

问题的出现原因：在跨浏览器的情况下，使用JavaScript / jQuery绑定窗口调整大小事件时，可能会遇到一些问题。

解决方法：使用bind方法来绑定窗口调整大小事件，而不是使用resize方法的快捷方式。bind方法更灵活，并且可以轻松地添加和移除事件处理程序。 代码如下：

$(window).bind('resize', function () { 
    alert('resize');
});

这样可以在窗口调整大小时弹出一个警告框。使用bind方法绑定事件处理程序，可以确保在跨浏览器的情况下，窗口调整大小事件能够正常工作。

为了实现UI的响应性，可以考虑使用setTimeout来延迟调用代码，如下例所示：

function doSomething() {
    alert("I'm done resizing for the moment");
};
var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

问题出现的原因是当窗口通过按钮展开到全屏时，此事件没有被触发。在我的电脑上，它在Safari、Chrome和Mozilla上正常工作。你使用的是哪个浏览器呢？

$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })

值得注意的是，如果你调用一个命名函数，只需要输入函数名，不要加引号或括号，除非没有参数传递给它。

对于UI的响应性，大多数人都需要优化的版本，如果jQuery增加一个第二个参数，即延迟时间（以毫秒为单位），它会自动添加上述所提到的“响应性”逻辑，这将是很好的。

如果你不想使用jQuery，可以参考下面的回答。

在Firefox中，我遇到了一个问题，即在调用resize事件时$未定义。我将我的resize函数放在setTimeout中，现在它可以正常工作了！

值得一提的是，这个jQuery函数只是向当前的函数列表中添加一个函数调用，以便在窗口调整大小时调用。它不会覆盖当前已计划在窗口调整大小时执行的事件。