检测何时使用 JavaScript 调整窗口大小？

javascript jquery

2022-08-30 04:26:17

有没有办法使用jQuery或JavaScript在用户结束调整浏览器窗口大小时触发函数？

在其他方面：

当用户调整浏览器窗口大小时，我能否检测到鼠标向上事件？否则：
是否可以检测窗口大小调整操作何时完成？

我目前只能在用户开始使用jQuery调整窗口大小时触发事件

答案 1

您可以使用 .resize（） 来获取每次宽度/高度实际更改的时间，如下所示：

$(window).resize(function() {
  //resize just happened, pixels changed
});

您可以在此处查看工作演示，它采用新的高度/宽度值并在页面中更新它们供您查看。请记住，事件并没有真正开始或结束，它只是在调整大小时“发生”......没有什么可以说另一个不会发生。

编辑：通过评论，你似乎想要一个类似“on-end”事件的东西，你找到的解决方案就是这样做的，除了一些例外（你不能以跨浏览器的方式区分鼠标向上和暂停，结束与暂停相同）。不过，您可以创建该事件，以使其更清晰一些，如下所示：

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

你可以在某个地方有一个基本文件，无论你想做什么...然后，您可以绑定到要触发的新事件，如下所示：resizeEnd

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

您可以在此处查看此方法的工作演示

答案 2

另一种仅使用JavaScript的方法是：

window.addEventListener('resize', functionName);

每次大小变化时都会触发，就像其他答案一样。

functionName是调整窗口大小时正在执行的函数的名称（末尾的括号不是必需的）。