使用getter和setter监听变量值更改?

时间:2017-01-25 15:38:50

标签: javascript

我试图在变量值改变时运行一个函数。到目前为止,我正在使用setInterval,但that is not good

setInterval实际上是否在生产中使用过,还是那种不良做法?是否会在页面中填充浏览器缓存中的事件,并且用户使用的时间越长,页面就越慢?

This question讨论了getter和setter但不幸的是我很难理解这些是如何工作的,并且对jsFiddle或JS初学者的解释非常满意。

This is我现在正在使用的内容。如果你调整执行窗口的大小,事件也会触发,这样你就可以在不缩放视口的情况下实际使用这个jsFiddle。

var currentZoom = screen.width / window.innerWidth;

function getZoomValue() {

var screenWidth = screen.width;
var windowWidth = window.innerWidth;
// http://www.quirksmode.org/mobile/viewports2.html
var zoomLevel = screenWidth / windowWidth;
    //console.log(zoomLevel);
    if (currentZoom != zoomLevel) {
        alert('zoom value/level changed to '+zoomLevel);
    }
currentZoom = zoomLevel;
}
getZoomValue();
setInterval(getZoomValue, 1000);

如何在这种情况下使用getter和setter?

This answer提到使用全局变量但是我不明白如何将zoomLevel值添加到全局变量中,加上使用全局变量也是不好的做法,对吗?

另外,它说使用Object.watch并不好,所以我想真的检查跨浏览器,如果变量的值已经改变是使用getter和setter,对吗?

我已经检查并通过these three questions进行了研究,但我仍然缺少理解。一个可能的jsFiddle的解释性答案将受到高度赞赏。

修改 人们在评论中指出我应该检查调整大小事件zoomLevel并且它不会改变它的值。不幸的是,如果用户resizes the viewport,它确实会改变它的价值。

window.addEventListener('resize', function(e) {
  var zoomLevel = screen.width / window.innerWidth;
  console.log(zoomLevel);
});

因此,如果我附加函数来获取zoomLevel resize事件,我将获得值,尽管没有发生真正的缩放。这在this comment中指出。

此外,Chrome和Firefox for Android不会在缩放/缩放时触发调整大小事件,仅在方向更改时触发,因此从调整大小事件中获取zoomLevel在此方案中也不起作用。

那么我如何将窗口调整大小事件结果与实际缩放更改事件结果分开,并且实际上获得zoomLevel是否将其附加到resize事件?

0 个答案:

没有答案