检测javascript中的变量何时更改

我有一个chrome应用程序，我想在分辨率改变时正确调整大小（尺寸与屏幕宽度成比例）。我已经编写了一个函数，可以用正确的尺寸重新绘制应用程序，现在我只想在需要时执行它

分辨率更改会导致screen.width更改，但（可能并不奇怪，因为它们与不同的内容相关）不会触发“resize”事件，而且据我所知，不会触发任何事件

我知道Proxy对象（），所以我写了一些代码来检测何时设置了一个变量并执行回调，这似乎是可行的，但在分辨率更改的实例中却没有

所以我在网上搜索并尝试了这一点（这基本上是关于一个类似主题的几个stackoverflow问题中提供的答案，实际上是我最初制作的，尽管缺乏新代理对象提供的抽象）

这似乎也能起作用（如果我在完成screen.watch（“width”）、（）=>console.log（“hello”）；然后执行screen.width=100；我的回调就会被执行，那么我会说手动设置screen.width）。但不是在分辨率改变的情况下（事实上，也许最重要的是，分配这个观察者似乎可以防止分配screen.width）

我有三个问题

1） 当我指派一个会把事情搞砸的观察者/代理时会发生什么

2） 我怎样才能知道浏览器在这个细节层次上做了什么（是什么触发了screen.width的更改？我猜是操作系统，这看起来像什么）

3） 有没有更好的方法来实现我最初的目标（调整chrome应用程序的大小）

大多数情况下，我对问题1）感兴趣，不再太在意问题3）

复制我的问题

• 在firefox或chrome中打开新选项卡
• 转到开发人员控制台
• 检查screen.width，更改分辨率，观察screen.width的更改
• 从中复制并粘贴代码
• Do screen.watch（“width”，（id，oldval，newval）=>{console.log（“hello”）；return newval；}）
• Do screen.width=100；并观察hello已被记录，screen.width设置为100
• 更改分辨率，注意屏幕宽度未设置

编辑-正如Bertrand回答后所揭示的，resize事件实际上可能在分辨率更改时触发，但这似乎是对分辨率更改的响应，该更改迫使窗口边界变小，若窗口较小，则screen.width可以更改，而无需触发resize事件。

，屏幕大小调整事件仅在

窗口

对象上触发。因此，您应该将侦听器添加到

窗口

而不是

屏幕

：

window.addEventListener('resize', yourfunc)

在Windows10下测试，它在Chrome上就像一个魔咒。值得一提的是，浏览器计算的实际屏幕大小使用屏幕分辨率和缩放

例如，如果您在1920x1080上，请100%缩放：

• 通过3840x2160，zoom 200%将输出1920x1080的浏览器窗口，并且

  调整大小

  似乎未触发
• 传递到zoom 150%将输出1280x720的浏览器窗口，并触发

  resize

尽管如此，还是有一个陷阱。仅当屏幕分辨率更新实际触发浏览器窗口大小调整时，才会检测到屏幕分辨率更新。考虑到浏览器窗口的窗口化/全屏初始状态以及较小/较大屏幕尺寸的变化，这一点并不明显

当我指派一个会把事情搞砸的观察者/代理时会发生什么

问题在于

width

属性实际上是

Screen.prototype

上的一个getter。它不是

窗口上的普通值。屏幕
：


console.log（窗口、屏幕、宽度）；
console.log（window.screen.hasOwnProperty（'width'））；
//相反，该属性存在于原型上，并且是一个getter：
常量描述符=Object.getOwnPropertyDescriptor（Screen.prototype，'width'）；
log（描述符）最简单的解决方案是使用计时器，并检查
屏幕宽度，比如说每10秒检查一次。将事件列表器添加到windows resize事件中不起作用？通常它在chrome中工作得很好。@georg我已经考虑过了，但我不满意这个解决方案（我需要快速的响应）。我不必太在意chrome应用程序的原因是我有一个备份计划，我需要它来做什么，它肯定会起作用。@Mark Baijens没错，我对window.addEventListener（“resize”，f）很满意，以前也用过它，但看起来分辨率的改变和resize不一样，我只是在chrome上再试了一次，但没有成功。如果相关的话，我使用的是Windows 10。在chrome中，感谢您的回复，这揭示了一些我并不欣赏的微妙之处。所以我一直在做window.addEventListener（'resize'，yourfunc）；正如你建议的那样，它不起作用。我注意到现在它在一些场景中确实有效，只是在我考虑的那些场景中不起作用。如果窗口适当大，以至于更改分辨率会迫使屏幕边界变小（例如全屏），则会触发调整大小事件（并且window.innerWidth会更改），但如果窗口变小，则不会触发调整大小事件，window.innerWidth不会更改，screen.width确实会更改。仅当浏览器窗口大小实际更新时，才会触发调整大小事件。我把它添加到答案中。太好了。谢谢你，这是非常好的，非常全面，感谢你（间接回答我的问题2），我希望有更简单的东西，因为你建议我是非常不透明的，我没有做任何C++，但我可能天真地希望这一点。