Question

当我单击浏览器窗口的最大化按钮时，我编写的将在调整窗口大小时执行的函数无法正常工作，我认为这是因为JavaScript窗口调整大小事件运行缓慢。当我使用鼠标调整窗口大小时，它起作用了。另外，当我尝试在纵向移动设备和横向移动设备之间切换时，速度也很慢。

面对与window.addEventListener（'resize'，aFunction）一起使用的问题，页面变慢。这些事件每秒产生多次，并且如果事件处理程序花费的时间过多，浏览器将无法重新绘制页面。

cacheViewBox

Answer 1

我取消了过渡：所有0.5秒的缓解；而且它工作了一段时间，现在不再工作了。

所以，我现在知道是因为window.addEventListener（'resize'，function）运行缓慢。

Answer 2

试试这个：

var timeout = false;
window.addEventListener('resize', function() {
    clearTimeout(timeout);
    timeout = setTimeout(aFuntion, 200);
});

阅读：https://bencentra.com/code/2015/02/27/optimizing-window-resize.html

Answer 3

尝试document.addEventListener('resize', aFuntion);

Answer 4

我已经在Firefox，Chrome和Internet Explorer中测试了以下代码，并且可以正常工作。我知道这是一种解决方法，因为该事件是从body标签触发的，但也许会对您有所帮助。

<html>
<head>
<script>
function resizeFunction() {
    console.log("working");
}
</script>
</head>
<body onresize="resizeFunction()">
content
</body>
</html>

JavaScript窗口大小调整事件很慢。如何优化窗口大小调整事件

4 个答案: