检测变量何时在javascript中发生更改

Question

我有一个chrome应用程序，我想在分辨率更改时正确调整大小（与屏幕宽度成比例的尺寸）。我编写了一个函数，可以使用正确的尺寸重新绘制应用程序，现在我只想在需要时执行它。分辨率的更改会导致screen.width发生更改，但是（由于它们与不同的事物有关，所以可能就不足为奇了），不会触发“调整大小”事件，据我所知，没有触发任何事件。我知道Proxy物件（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy），因此我编写了一些代码来检测何时设置了变量并执行了回调，这似乎可行，但在分辨率更改的情况下不起作用。因此，我在线搜索并尝试使用此方法https://gist.github.com/eligrey/384583（本质上，这是在类似主题的几个stackoverflow问题中提供的答案，实际上是我最初产生的结果，尽管缺乏抽象的含义代理对象提供）。这似乎也可行（从某种意义上来说，如果我说在完成screen.watch（“ width”，（）=> console.log（“ hello”））之后手动设置screen.width）；然后再执行screen.width = 100 ；我的回调已执行）。但不是在分辨率更改的情况下（实际上，也许最重要的是，分配此观察者似乎阻止了screen.width的分配）。我有三个问题1）当我分配一个混乱的观察者/代理时发生了什么。2）我如何才能知道浏览器在此详细级别上的工作（是什么发送触发来更改screen.width？我猜是操作系统，这是什么样的）3）有没有更好的方法来实现我最初想要的功能（调整chrome应用程序的大小）。通常，我对问题1）感兴趣，并且不再关心3）。要复制我的问题，在Firefox或Chrome中打开新标签页转到开发者控制台。检查screen.width，更改分辨率，观察screen.width变化从https://gist.github.com/eligrey/384583复制并粘贴代码做screen.watch（“ width”，（id，oldval，newval）=> {console.log（“ hello”）; return newval;}）;做screen.width = 100; 并观察到您好已记录并且screen.width设置为100更改分辨率，观察未设置screen.width。编辑-正如Bertrand回答后所揭示的那样，调整大小事件实际上可能会在分辨率更改时触发，但这似乎是对分辨率更改的响应，如果窗口较小，则强制窗口边界变小，然后screen.width可以更改而无需触发调整大小事件。

Answer 1

根据Mozilla的说法，屏幕调整大小事件仅在window对象上触发。因此，您应该将监听器添加到window而不是screen：

window.addEventListener('resize', yourfunc)

经过Windows 10的测试，它在Chrome上的魅力十足。值得一提的是，浏览器计算出的实际屏幕尺寸使用的是屏幕分辨率和缩放比例。

例如，如果您使用的是1920x1080，请缩放100％：

• 传递到3840x2160时，缩放200％将输出1920x1080的浏览器窗口，并且resize似乎未触发

• 传递到150％缩放将输出1280x720的浏览器窗口resize并被触发

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