Question

我已经建立了这个窗口高度＆amp; JavaScript中的宽度显示功能（类似于Chrome DevTools中的功能）。它的工作原理如下：

如果调整窗口宽度/高度，则会在附加的文本框中显示当前屏幕尺寸。
如果窗口处于非活动状态3秒钟，文本框将隐藏。
如果您重新调整窗口，它会重置计时器（不会导致重叠，以防您在1-2秒内重新调整）。

有效，这是我的第三次重写，但我知道它可以编码比这更好，有人可以给我一些关于如何改进我的代码的建议吗？我还处在新秀阶段。

var boxText = document.createElement('div');
var boxStyle = boxText.style;

boxStyle.position = 'fixed';
boxStyle.right = 0;
boxStyle.top = 0;
boxStyle.padding = '16px';
boxStyle.zIndex = 999;
boxStyle.fontSize = '22px';
boxStyle.display = 'none';

var timerHandle = setTimeout(3000);

function resetTimer() {
  window.clearTimeout(timerHandle);

timerHandle = setTimeout(function() {

  boxStyle.display = 'none';

 }, 3000);
}

window.addEventListener('resize', function(timerHandle) {

  boxText.innerText = window.innerWidth + 'px' + ' x ' + window.innerHeight + 'px';
  boxStyle.display = 'block';
  document.body.appendChild(boxText);

  resetTimer();

});

我真的想要更好地编写干净的模块化JS。任何帮助或观点表示赞赏！： - ）

Answer 1

你有一些错误，主要是在事件处理程序上做了一些繁重的工作。这是一个较轻的版本

var box = document.createElement('div');
var timerHandle;

// I would move this to external css if you want cleaner code
box.style.position = 'fixed';
box.style.right = 0;
box.style.top = 0;
box.style.padding = '16px';
box.style.zIndex = 999;
box.style.fontSize = '22px';
box.style.display = 'none';

// Append the box to the view only once! not everytime the event occures
document.body.appendChild(box);

// Handler for when the time is up
function hideBox() {
    box.style.display = 'none';
}

// I would add a throttle function here, search for lodash throttle for example
window.addEventListener('resize', function() {
    box.innerText = window.innerWidth + 'px' + ' x ' + window.innerHeight + 'px';
    box.style.display = 'block';

    // Reset the timer everytime the event happens
    if (timerHandle) {
        clearTimeout(timerHandle);
        timerHandle = null;
    }

    // Start the timer only when the event happend
    timerHandle = setTimeout(hideBox, 3000);
});

JS窗口宽度/高度函数 - 有效，但需要一些建议

1 个答案: