当屏幕宽度发生变化并触发javascript函数时，有什么方法可以设置调整大小功能答案

【问题标题】：Is there any way to set a resize function when screen width changes and it triggers a javascript function当屏幕宽度发生变化并触发javascript函数时，有什么方法可以设置调整大小功能
【发布时间】：2020-05-21 15:31:05
【问题描述】：

实际上我有一个悬停功能，它会在鼠标悬停时触发，我只想在屏幕尺寸 > 768 px 上使用这个功能，因为在触摸屏上没有这个功能。我通过在 javascript 函数中添加一个 if 语句来实现这一点，如下所示：并将我的 jquery 放在这个函数中。

函数 hoverFunction() { if ($(window).width() >760 ){

} }

现在这个 hoverFunction() 被调用两次，一次 onchange 和一次 onwindow 加载。现在让我们谈谈这个问题。当我加载页面并使用开发人员工具从大屏幕抓取移动到小屏幕时，即使在 768 像素以下，悬停功能也不会禁用，直到我刷新页面或触发 onchange 功能。当我从小屏幕尺寸移动到大屏幕尺寸时，它也会发生同样的情况，我必须刷新我使用 onchange 的页面。有什么办法可以解决这个问题。

【问题讨论】：

感谢大家的宝贵意见。实际上我是 javascript 的新手。我试图修复它，但不能这样做。任何人都可以解释一下如何使用悬停功能附加此调整大小，以便每次屏幕尺寸发生变化时，它都会检查是否屏幕大于 760，然后触发悬停功能。

标签： javascript jquery

【解决方案1】：

是的，您可以使用 window.onresize 来完成，请查看此处的示例：

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

【讨论】：

【解决方案2】：

你需要在resize事件上附加它，它会在每次屏幕尺寸变化时触发

【讨论】：

感谢大家的宝贵意见。实际上我是 javascript 的新手。我试图修复它，但不能这样做。任何人都可以解释一下如何使用悬停功能附加此调整大小，以便每次屏幕尺寸发生变化时，它都会检查是否屏幕大于 760，然后触发悬停功能

【解决方案3】：

请访问以下链接，这是使用 jquery 触发自定义函数的方法 https://stackoverflow.com/a/15114048/7300804

【讨论】：

【解决方案4】：

您可以只使用window.addEventListener('resize', reportWindowSize); 对于此事件reportWindowSize 将被触发很多次，因此您应该使用 debounced[https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf]reportWindowSize。在 javascript 中去抖动你可以参考这个[https://lodash.com/docs/4.17.15#debounce]

【讨论】：